1.采用flex布局的元素称为''容器'':容器有两个轴,主轴和侧轴
2.容器的属性
1.flex-direction : 决定主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
主轴是水平方向:
- flex-direction:row(默认值):起点在左边
- flex-direction:row-reverse:起点在右边
主轴是垂直方向:
- flex-direction:column:起点在上沿
- flex-direction:column-reverse:起点在下沿
2.flex-wrap:决定是否换行
flex-wrap: nowrap | wrap | wrap-reverse;
- flex-wrap: nowrap | wrap | wrap-reverse;
- flex-wrap: nowrap(默认值):不换行
- flex-wrap: wrap:换行
- flex-wrap: wrap-reverse:换行在第一行上方
3.flex-flow:是 flex-direction
属性和 flex-wrap
属性的简写形式,默认值为 row nowrap
4.justify-content:主轴上对齐方式
justify-content: flex-start | flex-end | center | space-around | space-between | space-between;
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中- space-around:两侧的间隔相等
- space-between:两端对齐,每一项间隔相等
- space-evenly:每一项和每一项间隔 每一项和容器间隔相等
5.align-items:交叉轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度。
3.布局
等高布局
.item { width: 400px; height: 300px; background: skyblue; display: flex; justify-content: space-between; padding: 5px;}.item div { width: 100px; font-size: 20px; background: pink;}.item div p { text-align: center;}
左侧宽度固定,右侧自适应布局
html, body { margin: 0; padding: 0;}.container { display: flex; width: 100%; height: 100vh; background: skyblue;}.left-tree { width: 200px; height: 100%; background: pink;}.main { flex: 1 1 auto;}
粘性页脚:无论中间的内容有多少,页脚始终在底部展示
html, body { margin: 0; padding: 0;}.container { display: flex; flex-direction: column; width: 100%; height: 100vh;}.header { width: 100%; height: 60px; background: pink;}.main { flex: 1 1 auto; background: skyblue;}.footer { width: 100%; height: 60px; background: pink;}