CSS中flex样式

Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

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

水平主轴（main axis）

垂直交叉轴（cross axis）

项目默认沿主轴排列

作用：

1.它能够更加高效方便的控制元素的对齐、排列

2.可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的

3.控制元素在页面的布局方向

4.按照不同于DOM所指定排序方式对屏幕上的元素重新排序

1.flex-direction

row （从左到右的顺序排列) 主轴为水平方向，起点在左端、右端

flex-direction: row；

 

row-reverse (会改变排列方向 改为 从右到左的顺序 主轴仍然是水平方向)

 flex-direction: row-reverse;

 

  column 主轴为垂直方向 从上到下会改变主轴方向

 column-reverse 会改变顺序，从下到上的顺序，主轴还是垂直方向

 2.flex-warp

nowarp默认不换行

 

wrap:换行，第一行在上方 

 

wrap-reverse:换行，第一行在下方 

 3. justify-content

flex-start：左对齐

flex-end：右对齐

center： 居中 就算有margin也会把整个item居中，并且左右两边的距离边框的大小相等

space-between：两端相等 间隔相等

space-around 两侧相等，中间间隔比两侧大一倍（不受marhin的干扰，会把margin的大小计算在内）