web前端开发篇(6)---flex布局详解

1 flex布局原理

flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。

  • 当我们为父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  • 父盒子称为容器container,子元素称为项目item

布局原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式,

2 常见父项属性

  • flex-direction:设置主轴方向
  • justify-content:设置主轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
  • flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

(1)主轴与侧轴

在flex布局中,是分为主轴和侧轴两个方向:

  • 默认主轴方向是x轴方向,水平向右
  • 默认侧轴方向是y周方向,垂直向下

(2)flex-direction设置主轴的方向

主轴和侧轴是可以变化的,就看flex-direction设置谁为主轴,另一个即为侧轴。可设置的属性值有:

  • row:默认值,从左到右
  • row-reverse:从右到左
  • column:从上到下
  • column-reverse:从下到上

(3)justify- content设置主轴上的子元素排列方式

使用这个属性时,一定要确定好哪个方向是主轴,可设置的属性值:

  • flex-start:默认值,从头部开始(如果主轴是x轴,则从左到右)
  • flex-end:从尾部开始
  • center:在主轴居中对齐(如果主轴是x轴,则水平居中)
  • space-around:平分剩余的空间
  • space-between:先两边贴边,再平分剩余空间

(4)flex-wrap设置子元素是否换行

flex布局中,默认的子元素是不换行的,如果一行装不下,会缩小每个子元素的宽度,可设置的属性值:

  • nowrap:默认值,不换行
  • wrap:换行

(5)align-items设置侧轴上的子元素排列方式(单行)

该属性控制子元素在侧轴上的排列方式,在子元素为单项的时候使用,可以设置的属性值:

  • flex-start:默认值,从上到下
  • flex-end:从下到上
  • center:居中
  • stretch:拉伸(使用此属性值,子元素不能设置高度,否则没有效果)

(6)align-content设置侧轴上的子元素的排列方式(多行)

该属性只能用于子项出现换行的情况(多行),在单行下是没有效果的,可设置的属性值:

  • flex-start:默认值,在侧轴的头部开始排列
  • flex-end:在侧轴的尾部开始排列
  • center:居中
  • space-around:子项在侧轴平分剩余空间
  • space-between:子项在侧轴先分布在两头,再平分剩余空间
  • stretch:设置子项元素高度平分父元素高度

(7)align-items和align-content的区别

  • align-item适用于单行情况,只有上对齐、下对齐、居中和拉伸
  • align-content适用于多行(换行)的情况下(单行设置其效果无效),可以设置上对齐、下对齐、居中、拉伸以及平分剩余空间等属性值
  • 总结就是单行用align-items,多行用align-content

(8)flex-row

flex-row属性是flex-direction和flex-wrap属性的复合属性。

3 常见子项属性

  • flex:子项目占的份数
  • align-self:控制子项再侧轴的排列方式
  • order:定义子项的排列顺序(前后顺序)

(1)flex属性

flex属性定义子项目分配到的剩余空间,表示占多少份数,属性值为number,默认值为0。

(2)align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个子项设置与其他子项不同的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性。

(3)order属性定义项目的排列顺序

数值越小,排列越靠前,属性值为number,默认为0,也可以为负值。

你可能感兴趣的:(前端,css,javascript)