flex布局－－语法篇

flex简介

当我们需要多行多列自适应，任意行对齐时。便可用flex布局实现。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。使用方法：.box{display:flex}

如果一个容器被设置为flex，称为flex容器（flex container）

那么该容器的在文档流中的子元素为flex item。

本文从以下三个方面来介绍：

• 方向
• 弹性
• 对齐

flex-方向

与flex方向有关的属性为：

• flex-direction(弹性的方向)
• flex-wrap（弹性的换行）
• flex-flow
• order（顺序）

flex-direction

flex-direction:row|row-reverse|column-reverse

事例

flex-wrap

flex-wrap:nowrap|wrap|wrap-reverse 默认不换行

flex-flow

flex-flow:<'flex-direction'>||<'flex-wrap'>

order

order: 初始值－ initial:0
按order值的大小在主轴上排列，值越大越往后排

flex-弹性

• flex-grow
• flex-shrink
• flex-basis

flex-basis

flex-basis:main-size|

设置flex item的初始宽/高

flex-grow

flex-grow:

初始值－initial:0

设置的是元素所能分配到的剩余空间的比例。

具体值是： flex-basis+flew-grow/sum(flew-grow)*remain

首先浏览器会在没有flew-grow的设置下做布局，那么剩余空间就是remain，然后再来看是否有元素设置 flew-grow ,如果有，这个元素她的宽度就等于他的flex－basis再加上 flow-grow/sum(flow-grow)*remain
例子：

如何设置其中一个div为flex-grow:1时

如何再设置其中一个div为flex-grow:2时

flex-shrink

flex-shrink:

默认为－initial:1

具体值是：flex-basis+flew-shrik/sum(flex-shrink)*remain 此时remain为负数

flex
flex:||<'flex-shrink'>||<'flex-basis'>

initial:0 1 main-size

对齐

• justify-content
• align-items
• align-self
• align-content

justify-content

设置main-axis 方向上的对齐方式

justify-content:flex-start|flex-end|center|space-between|space-around initial：flex-start

flex-start（默认值）： 主轴起始方向对齐
flex-end：主轴结束方向对齐
center： 居中。
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

justify-content:flex-start|flex-end|center|baseline|stretch initial：stretch

设置cross-axis方向上的对齐方式

align-self

align-self:auto|flex-start|flex-end|center|baseline|stretch

设置单个flex item 在cross－axis方向上的对齐方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

align-content

align-content:flex-start|flex-end|center|space-between|space-around|stretch initial：stretch

设置cross-axis方向上行对齐方式