如何把一个盒子变成弹性盒子?
1.定义一个弹性盒子的属性:
display:flex-->这个属性是定义了一个弹性盒子。
flex:-direction:row-->定义主轴的方向。有四个取值分别为↓↓
row:主轴为水平方向,子元素从左到右水平排列。(默认值)
row-reverse:主轴为水平方向,子元素从右到左水平排列(不常用)
column:主轴为垂直方向,子元素从上到下垂直排列
column-reverse:主轴为垂直方向,子元素从上到下垂直排列(不常用)
<style> .box { width: 600px; height: 600px; border: 1px solid #000; /* 定义一个弹性盒子 */ display: flex; /* 定义弹性盒子的主轴方向 */ flex-direction: row; } .box .info { width: 100px; height: 100px; background-color: orange; text-align: center; line-height: 100px; } </style>
1 <div class="box"> 2 <div class="info">1</div> 3 <div class="info">2</div> 4</div>