【CSS】图解flex布局

DarkHorse
4,165 阅读7分钟

前言

传统的布局方式基于盒模型，使用浮动，定位等方式不仅会影响其他元素属性，还不能在移动端很好的布局。2009年，W3C 提出了一种新的方案----flex 布局，flex相对比传统布局操作方便极为简单，且兼容性支持95%以上浏览器，支持IE9+，是未来布局的首选方案。

1 布局原理

Flex是flexible Box 缩写，意为“弹性布局”，flex布局也叫伸缩布局，弹性布局，弹性盒布局，伸缩盒布局。 当我们为父元素设为flex布局以后，子元素的float、clear和vertical-align属性会失效。

采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，容器存在两根轴，默认项目按主轴排列。

  • 主轴：默认主轴是水平方向，左边开始，右边结束。
  • 侧轴：默认是垂直方向，上边开始，下边结束。

主轴和侧轴是通过flex-direction确定的，横线排列，x为主轴，y方向为侧轴。纵向排列，y方向为主轴，x方向为侧轴（下图为默认横向排列）。

flex布局原理.png

flex属性分为两部分:

  • 作用在容器上的容器属性，也叫弹性空间或弹性容器。
  • 作用于项目上的项目属性，也叫弹性元素或弹性项。

2 常用的容器属性

2.1 display

.container {
    display: flex | inline-flex;
}

要想使用flex布局，首先父项要开启弹性空间，块元素使用flex，内联元素使用inline-flex。 我们来看个最简单的例子：

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

外面是container容器，里面是有三item，当父元素display设置为flex时，该容器变成了flex布局，三个项目会沿着主轴方向依次排列。

.container {
    display: flex;
    border: 2px black solid;
    width: 500px;
    margin: 10px auto;
}

.item {
    width: 100px;
    height: 100px;
    background-color: aqua;
}

.item:first-of-type {
    background-color: pink;
}

.item:last-of-type {
    background-color: greenyellow;
}

此时的效果，三个项目沿着主轴水平依次排列在一行。

image.png

2.2 flex-direction

设置主轴方向（即项目的排列方向），默认主轴是x轴，那么对应y轴就是侧轴，当然我们也可以把我们主轴设置为y轴，元素是跟着主轴排列的。

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

  • row 水平排列，相当于左浮动 image.png

  • row-reverse 水平逆序排列，相当于右浮动 image.png

  • column 垂直排列 image.png

  • column-reverse 垂直逆序排列 image.png

2.3 justify-content

主轴对齐方式，设置主轴上子元素的排序方式。

justify-content: flex-start | flex-end | center

  • flex-start 居开始 image.png

  • flex-end 居结束 image.png

  • center 居中 image.png

  • space-evenly 平均分配剩余空间（首尾各留1间距） image.png

  • space-around 平均分配剩余空间（首尾各留一半间距） image.png

  • space-between 两端对齐 image.png

2.4 flex-warp

flex-warp表示子元素是否换行，默认不换行。

flex-wrap: no-wrap | wrap | wrap-reverse;

  • nowrap 不换行 当子元素的宽度之和超过弹性盒子，会自动缩小子元素的宽度，以确保它们显示在同一行显示。 image.png

  • warp 换行

image.png 换行的行数决定侧轴的行数

  • warp-reverse 方向与wrap相反 image.png

2.5 align-items

侧轴对齐方式，设置侧轴上元素的排序方式。

align-items:flex-start | flex-end | center | baseline | stretch

  • flex-start 居开始 image.png

  • flex-end 居结束 image.png

  • center 居中

image.png

  • Streth 拉伸（子元素不设置高度时，默认值) image.png

2.6 align-content

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

侧轴多行对齐方式，适用于发生换行，侧轴不止一行，主轴方向上多个轴，设置整体位置，和justify-content一样。

  • flex-start 居开始
  • flex-end 居结束
  • center 居中
  • space-around 空间包含元素 两边窄一些
  • space-evenly 空间包含元素 间距平均分配
  • space-content 两端对齐

3 常用的项目属性

适用于子项的宽度或高度之和在主轴或侧轴还有剩余空间或者溢出空间时，我们可以使用这些属性控制子项，实现更灵活的布局。

  • 剩余空间 什么是剩余空间呢？当容器的宽度为500px，ABC三个盒子宽度为100px，那么容器主轴上的剩余空间就是500-300=200px。

image.png

  • 溢出空间 当容器的宽度为500px，ABC三个盒子宽度为200px，那么容器主轴上的溢出空间就是500-600=100。

image.png

3.1 flex-grow

  • grow 生长拉伸的意思，设置子项拉伸比例。
  • 适用于子项宽度未占满父项，数值越大，拉伸越大。
flex-grow:0;

flex-grow的默认值是0，子项目不做任何比例拉伸，如果将三个子项目的flex-grow属性都设为1，那么他们将按照1:1:1的比例分配剩余空间200px，此时，每个子项的宽度就是166px。

image.png 如果只给A项目设置flex-grow为1，其他两个默认为0，他们的比例就是1:0:0，意味着所有的剩余空间都给A,A就有300px了。

image.png

如果容器压根就没有剩余空间，那么即使设置了flex-grow也不会生效。

3.2 flex-shrink

  • grow 压缩缩小的意思，设置子项压缩比例。
  • 适用于子项宽度超过父项，数值越大，压缩越大。
flex-shrink:1;

flex-shrink的默认值是1，当子项超过父项，子项目会按照1:1的比例压缩。如果将父项设为500px，3个子项目宽度设为200，这时三个项目的宽度会变成166px。

image.png

如果不希望压缩，我们可以选择换行，只需要设置flex-warp为warp就好。

image.png

如果容器还有剩余空间，同样设置flex-shrink也是无效的。

3.3 flex-basis

  • basis基础意思，设置子项在主轴空间的宽度。
  • 项目实际宽度优先级： max-width/min-width > flex-basis > width 
flex-basis:auto;

flex-basis的默认值是auto，即项目本来的宽度。

3.4 flex

  • flex-grow，flex-shrink和flex-basis可以用一个flex属性将三个值组合在一起。
  • flex:1 相当于一个快捷键，子元素会自动放大与缩小。
.item {
    flex:1;
}
/* 等价于 */
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}
  • 即当flex为单值时，表示所占份数。

3.5 order

设置子项的排列顺序（先后顺序）,默认是0，数越小，越靠前。

order：0;

01.jpg

3.6 align-self

设置子元素对齐方式，可覆盖align-items属性。 默认为auto，继承父项的align-items。

.item{
  align-self:auto | flex-start | flex-end | center | baseline | stretch
}

给子项B单独设置align-self属性 auto | flex-start |baseline

image.png

flex-end image.png

center image.png

4 应用场景

4.1 两栏/三栏布局

image.png

image.png

4.2 中间自适应布局

image.png

4.3 移动端搜索框

image.png

5 总结

  • flex中四个核心概念：容器、项目、主轴、侧轴，一定要分清主轴侧轴；
  • justify-content:center和 align-items:center属性可以快速实现元素的水平垂直居中；
  • justify-content中的space-evenly属性各元素平均分配空间，space-around两边更窄一些；
  • felx-grow 设置子项的拉伸比例，flex-shrink设置子项的压缩比例，flex-basis设置子项在主轴空间的宽度；默认值 0 1 auto；
  • flex-grow，flex-shrink和flex-basis可以用一个flex属性将三个值组合在一起，flex为单值时，表示项目所占份数；
  • felx布局应用场景多是在自适应布局。

结语

本篇文章就到此为止啦，由于本人经验水平有限，难免会有纰漏，对此欢迎指正。如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！

avatar
文章
阅读
粉丝