Flex布局--初学者

概念

采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

使用

很多小伙伴刚开始学flex布局，可能不太会用，不太理解，这里要和大家说明一下。

Flex布局的属性，分为父元素属性和子元素属性。

父元素属性:css属性写在父元素的样式里。

子元素属性:css属性写在子元素的样式里

今天说说父元素属性

父元素属性有6个：

注意：使用flex布局之前记得在父元素css样式中加上

display:flex

flex-direction属性：控制轴方向

属性值：row、row-reverse、column、column-revers