flex布局
flex布局 flexible灵活的
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
在传统的布局方式中我们常采用：在盒模型的基础上使用定位，浮动，display转换元素的显示模式，但是有些效果实现起来很不方便，w3c提出了解决方案使用flex布局，flex可以灵活，响应式的实现各种页面布局
flex在pc端有兼容性问题（ie11或更低版本不支持或仅部分支持），多用于移动端开发，传统布局多用于pc端开发，pc端若不考虑兼容性也可以使用flex布局
要使用弹性盒，就要使用display属性将一个元素设置为弹性容器
弹性容器：
display：flex 将元素设置为块级弹性容器，元素独占一行 用的较多
display：inline-flex 将元素设置为行内弹性容器 元素可以和其他元素在同一行展示
弹性元素：
弹性容器里的直接子元素（亲儿子）是弹性元素（弹性项）
一个元素可以同时是弹性容器和弹性元素
注意：
-
通过给父元素设置flex属性来控制子元素的排列方式
-
任何元素都可以采用flex布局，行内元素也可以指定为flex布局，行内元素采用了flex布局后可以直接设置宽高无需转换
-
当我们为父元素设置了flex布局后，子元素的float，clear，vertical-align属性将失效
-
被指定为flex布局的元素叫做flex容器，它里面的所有子元素就是flex项目，简称为项目
flex相关的属性有的是要设置在父元素上的有的是要设置在子元素上的
父元素设置的属性：
1:需要给父元素设置display：flex；就是知道这个盒子就是弹性容器，采用flex布局
flex-direction
取值：
-
row 默认值 弹性元素在容器中水平排列，由左向右 主轴为水平方向，起点在左端
-
row-reverse 弹性元素在容器中水平排列，由右向左 主轴为水平方向，起点在右端。
-
column(列) 弹性元素在容器中垂直排列，自上而下 主轴为垂直方向，起点在上沿
-
column-reverse 弹性元素在容器中垂直排列，自下而上 主轴为垂直方向，起点在上沿
作用：决定flex容器主轴的方向，弹性元素排列方向称为主轴（即项目排列的方向，子元素是根据主轴排列的），
与主轴垂直方向的称为侧轴
-
flex布局的容器有两根轴主轴和侧轴，主轴和侧轴没有固定；默认情况下水平方向为主轴，垂直方向为侧轴，flex-direction可以转换主轴的方向，
justify-content
作用：设置子元素在主轴上的排列方式(如何分配主轴上的空白空间)
使用该属性前一定要确定好哪个方式是主轴
取值：
-
flex-start：默认值 子元素在主轴的头部对齐
-
flex-end 子元素在主轴的尾部对齐
-
center 子元素在主轴上居中对齐
-
space-between 子元素在主轴上两端对齐，项目之间的间隔相等
-
space- around 每个子元素两侧的间隔相等，所以，项目之间的间隔比项目与两端的间隔要大一倍
-
space-evenly。 空白分布到元素的单侧 有兼容性问题
flex-wrap
作用：默认情况子元素都在一条轴线上排列，flex-wrap属性指定当子元素在一行排不下时如何换行
取值：nowrap 默认值 子元素不自动换行，子元素会被压缩
wrap 换行，第一行在上方 元素沿着副轴方向自动换行
wrap-reverse 换行，第一行在下方 元素沿着副轴反方向换行
flex-flow
flex-flow是flex-direction和flex-wrap的简写属性。没有书写顺序
flex-flow:row wrap;
align-item
-
作用：设置单行子元素在侧轴上的排列方式
-
取值：
flex-start： 侧轴的起点对齐
flex-end：侧轴的终点对齐
center：在侧轴的中点对齐
stretch 拉伸 默认值 在子元素没有设置高度或设为auto时，在侧轴上拉伸弹性元素使其占满整个容器的高度
baseline 弹性元素第一行文字基线对齐
align-centent
-
作用：设置多行子元素在侧轴上的对齐方式 多行即是子元素有换行的情况，该属性在子元素为单行的情况下不起作用
-
取值：
-
flex-start： 侧轴的起点对齐
-
flex-end：侧轴的终点对齐
-
center：在侧轴的中点对齐
-
space- around 每根轴线两端的间隔相等，所以轴线与轴线之间的间隔比轴线与边框之间的间隔要大一倍
-
space-between 与侧轴两端对齐，轴线之间的间隔平均分配
-
stretch 拉伸 默认值，轴线占满整个侧轴
-
设置在子元素（项目）上的属性
Flex-grow属性
作用：定义弹性元素放大比例。即当父元素有多余空间时，弹性元素如何分配剩余空间，剩余空间是值父元素剪去那些已经设置尺寸元素后所剩下的空间
-
使用flex-grow定义子元素在剩余空间所占的分数
-
flex-grow取值：0|数字
-
flex-grow：0；表示该即是存在剩余空间，该子元素也不放大
-
如果所有的子元素flex-grow的值都为1，则他们将等分剩余空间
-
如果有一个子元素flex-grow的值为2，其他的子元素flex-grow：1，则为2的子元素分配剩余空间时所占的剩余空间比其他子元素多一倍
-
-
flex-shrink属性
作用：定义项目（子元素）缩小的比例，默认值为1；即在父元素中的空间不足的以容纳所有子元素时，弹性元素如何缩小 （弹性元素缩小的是根据flex-shrink和元素本身的大小来共同决定的，比较复杂不要深究）
格式：flex-shrink：numeber
-
如果所有项目的flex-shrink属性值都为1，在空间不足时他们将等比例缩小。
-
如果有一个项目的flex-shrinks属性值为0，其他项目的值为1，在空间不足时前者不会缩小
-
负值对该属性无效
flex-basis （可不讲）
作用：设置弹性元素在主轴上的基础长度 就像一个弹簧的静止状态时的自身长度，如果设置了该属性，元素本身设置的宽高属性就没有作用了
当弹性容器的主轴为水平方向时，flex-basis决定了元素的元素的宽度
当弹性容器的主轴为垂直方向时，flex-basis决定了元素的元素的高度
默认值为auto，参考元素自身的高度或者宽度
如果flex-basis设置了一个具体的数值，则以该值为准
flex简写属性
flex属性时flex-grow flex-shrink flex-basis的简写属性
默认值为 flex:initial; 即表示： flex:0 1 auto;
快捷键： flex：auto； 即表示 flex:1 1 auto;
flex:none; 即表示 flex:0 0 auto; 不能放大，缩小即弹性元素没有弹性
align-self
作用：在元素是单行的情况下，允许某单个项目与其他项目在侧轴上的对齐方式不同，设置该项目自己在侧轴上的对齐方式。
对该单个项目而言，设置了aglin-self属性会覆盖父元素align-items的属性作用在它身上的属性
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
-
默认值为auto，表示继承父元素align-items的属性，如果没有父元素，则等同于
stretch -
属性值除了auto以外，其他的同align-items一样
order
作用：定义弹性元素在页面上的排列顺序（前后顺序）
取值为数值 默认值为0，数值越小，排列的越靠前
-
不改变html结构
-
可以有负值
国王排名：
共有 0 条评论