一、理解flex容器与元素
二、flex容器属性
- flex-direction:决定元素的排列方向(即设置主轴),默认为row
-
- flex-direction: column;
- flex-direction: row;
- flex-wrap:当元素一行排列不下时,决定元素如何换行,默认为nowrap
-
- flex-wrap:nowrap;
- flex-wrap:wrap;
- flex-wrap:wrap-reverse;
- flex-flow:flex-direction与flex-wrap的简写
- justify-content:元素在主轴上的对齐方式.默认是flex-start
-
- justify-content:center
- justify-content:flex-start
- justify-content:flex-end
- justify-content:space-around,容器中每个子元素的两端相等,子元素之间的间隔比子元素与边框的间隔大一倍。
- justify-content:space-between,容器中子元素两端对齐,子元素之间的间隔相等
- align-items:元素在交叉轴的对齐方式,默认为stretch
-
- align-items:center;
- align-items:flex-start;
- align-items:flex-end;
- align-items:baseline;文字在同一水平线上
- align-items:stretch;如果项目未设置高度或设为auto,将占满整个容器的高度