css学习——弹性盒子总结

#弹性盒子

弹性盒子基础的属性：

display: flex
不管是什么元素都可以添加flex变成弹性盒子
弹性盒子内部的项目直接会变成可设置宽高等属性的元素
容器内部元素默认的按照主轴进行排列

##父级元素上的属性

justify-content 子元素水平排列方式

center 居中
space-between 两端对齐,并且相邻两个间隔都相等
sapce-around 每一个两侧的间隔相等
flex-start 左对齐
flex-end 右对齐

aligen-items 单行子元素垂直排列方式

flex-start 顶部
flex-end 底部
center 垂直居中
baselin 项目的第一行文字的基线对齐
stretch 如果未设置高度或设为auto，将占满整个容器的高度

aligen-content 多行子元素垂直排列方式

center 垂直
flex-start 顶部
flex-end 底部
space-between 垂直方向两端对齐，切间隔相等
space-around 两侧的间隔都相等
stretch（默认值）：占满

flex-direction 排列方式

row 横向排列
row-reversre 与横向排列的顺序相反
column 纵向排列
colume-reverse 与纵向排列的顺序相反

注意：当为纵向排列时，如果想要水平居中的话，应使用aligen-items而不是justify-content,因为此时的排列顺序恰好与不设置这个属性前的顺序相反。

flex—wrap 决定子元素的换行方式

nowrap 默认,不换行
wrap 换行
wrap-reverse 反转wrap序列

flex-flow 等于上面两个的缩写

flex-flow: column wrap;

##子元素的属性

flex

flex:num;
num是系数，父级总共分成几份,它占几分之num;
子元素在划分父级元素宽度时，先划分固定宽度，其他的宽度再平分

flex-grow 定义子元素的放大比例
order 规定子元素的顺序

数值越小，越靠前默认值为 0

##弹性盒子布局

1. 父级盒子可以有多个子盒子
2. 弹性盒子只定义了子元素如何布局，不影响盒子内外的渲染
   3.在父级定义该父级为弹性盒子，父级内的子级盒子全在一行显示，影响只是布局