CSS_flex

CSS_Flex

flex中有两个概念，容器和项目

容器

父元素，设置display: flex的元素叫容器

轴

轴分为横轴和纵轴，这个是不会变得，但是主轴和副轴会改变。默认主轴为横轴

开始结束点

flex-start和flex-end分别为开始和结束点，开始和结束点是可以修改的位置。

项目

容器中所有的子元素叫项目

项目默认根据主轴进行排列，从flex-start开始到flex-end结束，这些规则，可以靠属性修改

容器属性

flex-direction 改变主轴方向

• row (默认值)
• column 将纵轴设置为主轴
• row-reverse 将横轴设置为主轴，flex-start在右，flex-end在左
• column-reverse 将纵轴设置为主轴，flex-start在下，flex-end在上

flex-wrap 控制项目是否换行

• nowrap (默认值 不换行)
• wrap 换行，如果容器空间不够，则换行
• wrap-reverse 换行，但是从下往上换行（倒序的行）

flex-flow

flex-direction和flex-wrap的简写

选择器 {
  flex-flow: flex-direction flex-wrap;
}

justify-content 控制项目在主轴的排列方式

• flex-start 默认值
• center 居中
• flex-end 在flex-end位置
• space-between 最常用的！！！！！两端贴边，中间等分空隙
• space-around 所有元素两边有相同的距离
• space-evenly 所有元素之间的间距都相同

align-items 控制项目在副轴的排列方式

• flex-start 元素在副轴的flex-start位置
• center 元素在副轴正中间
• flex-end 元素在副轴的flex-end的位置
• stretch 默认值

align-content 换行的话，行在副轴上的排列方式

• flex-start
• center 居中
• flex-end 在flex-end位置
• space-between 最常用的！！！！！两端贴边，中间等分空隙
• space-around 所有元素两边有相同的距离
• space-evenly 所有元素之间的间距都相同
• stretch 默认值

项目属性

flex-grow 如果父元素有空间，则自动放大

• 0 默认值
• 任意数字

flex-shrink 如果父元素空间不够，则压缩项目

• 1 默认值
• 任意数字

flex-basis 设置项目在主轴上所占的尺寸

比width、height优先级要高
默认值为auto

flex 是前三个属性的复合属性

选择器 {
  flex: flex-grow flex-shrink flex-basis;
  flex: flex-grow;
}