前端CSS布局——伸缩布局

1.Flex布局

• 两个属性 ① display : inline-flex 将对象作为弹性伸缩盒展示,用于行内元素 ② display : flex
  将对象作为弹性伸缩盒展示,用于块级元素

2.常用属性

• flex-direction : 用于指定Flex主轴的方向,继而决定Flex子项在Flex容器中的位置 取值 : row |
  row-reverse | column | column-reverse row :
  默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴 row-reverse : 与row相反 column :
  表示垂直方向从上到下排列,此时垂直方向轴线为主轴 column-reverse : 与column相反

  justify-content : 用于指定主轴(水平方向)上Flex子项的对齐方式 取值 : flex-start | flex-end
  | center | space-between | space-around flex-start : 默认值,表示与行的起始位置对齐
  flex-end : 表示与行的结束位置对齐 center : 表示与行中间对齐 space-between :
  表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start space-around :
  表示间距相等,中间间距是两端间距的2倍.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center.

  align-items : 用来指定侧轴(垂直方向)上Flex子项的对齐方式 取值 : stretch | flex-start |
  flex-end | center | baseline stretch :
  默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度.这里需要注意一下,在只有一行的情况下,行的高度为容器的高度,即Flex子项高度为容器的高度
  flex-start : 表示与侧轴的开始位置对齐 flex-end : 表示与侧轴的结束位置对齐 center : 表示与侧轴中间对齐
  baseline : 表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上,效果等同于flex-start

  flex-wrap : 用来指定Flex子项是否换行 取值 : nowrap | wrap | wrap-reverse nowrap :
  默认值,表示不换行,Flex子项可能会溢出 wrap : 表示换行,溢出的Flex子项会被放到下一行 wrap-reverse :
  表示反向换行

  align-self : 该属性用于单独指定某Flex子项的对齐方式 取值 : auto | flex-start | flex-end
  | center | baseline | stretch

  align-content : 该属性只用于多行的情况下,用于多行的对齐方式 取值 : stretch | flex-start |
  flex-end | center | space-between | space-around stretch :
  默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度 flex-start :
  表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行 flex-end :
  表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行 center : 表示各行与侧轴中间对齐
  space-between :表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数时,效果等同于flex-start
  space-around : 表示各行之间间距相等,中间间距是两端间距的2倍.要注意特殊情况,当剩余空间为负数时,效果等同于center

3. 复合属性

• 复合属性flex,是flex-grow、flex-shrink和flex-basis的简写属性,用于指定Flex子项如何分配空间

  flex-grow : 默认值为0,若省略则被默认为1 flex-shrink : 默认值为1,省略时默认为1 flex-basis :
  默认值为auto,省略是默认为0%

————————————————