Flexbox
弹性盒子
父元素设置样式,子元素设置宽度。
flex模型说明
- 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
- 设置了
display: flex
的父元素(在本例中是<section>
)被称之为 flex 容器(flex container)。 - 在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项(flex item)(本例中是
<article>
元素。
行列
flex-direction
指定主轴的方向。默认是row
,会按浏览器默认语言方向排成一排。
备注
你还可以使用 row-reverse
和 column-reverse
值反向排列 flex 项。
换行
溢出了就换行。
flex-wrap: wrap;
同时在子元素中设置:
flex: 200px
上面这条声明表明至少为200px宽,会拉伸使整个行填满。
flex-flow缩写
flex-direction: row;
flex-wrap: wrap;
替换为
flex-flow: row wrap;
flex项的动态尺寸
article {
flex: 1;
}