Flex布局总结(详细)

Flex布局

以前在网页开发过程中,布局一直是不可或缺的,从最早的表格布局,到后来的DIV+CSS布局,现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多,其适应性也非常强,其强大的伸缩性,发挥了极大的作用,因此就在这里整理一下flex布局的知识。

参考链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

首先先明确一下主轴侧轴的意思:

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向(x轴正向)

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的(y轴负向)

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction设置主轴的方向。首先要指定一个父盒子为伸缩盒子,即指定:display: flex

父项常见属性(设置父元素)

1. flex-direction

flex-direction属性决定了主轴的方向,注意这个属性是给父元素设置的。

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

实现效果如下:

沿x轴正方向默认值(flex-direction: row):
Flex布局总结(详细)_第1张图片

沿着x轴负方向flex-direction: row-reverse: Flex布局总结(详细)_第2张图片

2. justify-content

这个属性定义了子项目在主轴上的对齐方式。(下面图示均为主轴为x轴正方向的情况)

  • flex-start:默认值,从头部开始,如果主轴是x轴,则从左到右

  • flex-end:从尾部开始排列

    Flex布局总结(详细)_第3张图片

  • center:在主轴居中对齐(如果主轴是x轴则水平居中)

    Flex布局总结(详细)_第4张图片

  • space-around:平分剩余空间

  • space-between:先两边贴边 再平分剩余空间**(重要)**

3. flex-wrap属性

默认情况下,所有的子项目都是排列在一条线上的,也就是说默认不换行。当所有子项目的总宽度大于父元素的宽度的时候,子项目会均分父元素的宽度。如下图所示,原来给子元素的宽度是100px,父元素宽度是500px,当超过了父元素的宽度的时候,子元素的宽度就会被缩小放到父元素里面。Flex布局总结(详细)_第5张图片

如果不想要这个效果,想要让子元素保持原来的样子,就可以用flex-wrap: wrap来设置它可以换行。效果如下:Flex布局总结(详细)_第6张图片

4. align-item属性(单行)

该属性是设置侧轴上的子元素排列方式(上面那个flex-direction是设置在主轴的),也就是说,如果想要让子项目水平垂直居中,相当于实现项目在主轴和侧轴上的居中。align-item属性是控制子项在侧轴(默认是y轴)上的排列方式,可以在子项为单行的时候使用。

  • flex-start:默认值,从上到下

  • flex-end:从下到上

    Flex布局总结(详细)_第7张图片

  • center:挤在一起居中(垂直居中)
    Flex布局总结(详细)_第8张图片

  • stretch:拉伸,用这个的时候子盒子不要给高度。设置这个属性后盒子会沿着侧轴拉伸

    Flex布局总结(详细)_第9张图片

5. align-content(多行)

上面那个align-items属性针对单行的子项目,而align-content适用于子项出现换方(多行)的情况,在单行下是没有效果的。

  • flex-start:默认值,在侧轴的头部开始排列

  • flex-end:在侧轴的尾部开始排列

  • center:在侧轴中间显示

    前三个的效果跟align-items差不多,就不一一展示了

  • space-around:子项在侧轴平分剩余空间

Flex布局总结(详细)_第10张图片

  • space-between:子项在侧轴先分布在两头、再平分剩余空间

Flex布局总结(详细)_第11张图片

  • stretch:设置子项元素高度平分子元素高度,同样的,子项不能设置高度,盒子沿着侧轴拉伸
    Flex布局总结(详细)_第12张图片

6. flex-flow属性

flex-flowflex-direction + flex-wrap的复合属性。

flex-diection: column;
flex-wrap: wrap;
/* 相当于 */
flex-flow: column wrap;

子项常见属性(设置子元素)

a. flex属性

flex属性定义子项目分配剩余空间,用flex来表示占多少份数

.item {
    flex:  /*默认1*/
}
/*给第二个盒子flex:2;*/

Flex布局总结(详细)_第13张图片

b. align-self控制子项自己在侧轴上的排列方式

align-self属性可覆盖align-items属性,默认值为auto,表示继承父元素align-items属性,如果没有父元素,则等同于strech

align-self: flex-end;

c. order属性定义项目的排列顺序

数值越小,排列越靠前,默认为0.

注意:和z-index不一样

再给第二个盒子order:-1; align-self: flex-end;

Flex布局总结(详细)_第14张图片

总结

  1. flex-direction调整主轴方向(默认为水平方向)
  2. justify-content调整主轴对齐
  3. align-items调整侧轴对齐(子元素可以使用align-self覆盖)
  4. flex-wrap控制是否换行
  5. align-content堆栈(由flex-wrap产生的独立行)对齐
  6. flex-flowflex-direction + flex-wrap的简写形式
  7. flex是子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
  8. order控制子项目的排列顺序,正序方式排序,从小到大

555555截图的时候把图片放到一个文件夹里面,然后过来博客搬运的时候一不小心按到 ctrl+Z 图片突然全都没了。那一刻是心痛的orz,然后就重新截图复制粘贴了qwq

你可能感兴趣的:(flex,css,css3)