CSS flex 弹性布局详解

努力赚钱养猫猫
230 阅读5分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，一个不想摸鱼的公举,期待着有一天能够咸鱼翻身。上一篇文章是 git 常用命令集合 主要是总结了git 常用的命令，今天我们总结一下flex弹性布局的相关知识。

flex简介

flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局，用了flex你会发现它特别好用，可以用来水平居中和垂直居中。

flex容器包含了两个互相垂直的轴，分别是主轴和副轴。flex元素沿着主轴起点到主轴的终点依次排列。如果flex容器包含了多行的flex元素，那么flex元素沿着副轴的起点到副轴的终点依次排列。

注意：是flex不能跟position一起用，否则会失效；flex的布局会让子容器的float、clear和vertical-align属性失效

flex 兼容浏览器的写法

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

但是这里按需求来写，我这边习惯的是第一个和最后一个来结合一起用。flex写css的时候常常用到，以后大家可以把它写在公共类文件里面，这样方便以后调用。

flex基础用法

在父元素上加上display:flex

.container {
  display: flex;
}
.container > div {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  background-color: pink;
}

image.png

flex 容器的属性

flex-direction

该属性用于改变容器的主轴的方向，此属性默认属性值是row。

row : 主轴方向为水平方向,起点在容器的左端

image.png row-reverse : 主轴方向为水平方向,起点在容器的右端

image.png column : 主轴方向为垂直方向,起点在容器的上端

image.png column-reverse : 主轴方向为垂直方向,起点在容器的下端

image.png

flex-wrap

该属性是设置容器内的flex元素是否换行，默认属性值是nowarp。

nowarp: 不换行，原本设置了容器内元素为100px，现在被挤扁了 image.png warp ：换行，第一行在上面，换了行之后明显容器里的元素恢复正常

image.png

warp-reverse ： 换行，第一行在下面

image.png

flex-flow

该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap

flex-flow: <flex-direction> || <flex-wrap>;

justify-content

该属性是设置主轴的对齐方式

center ：水平居中对齐

image.png

space-between ：两侧边对齐 中间均匀分布

image.png

space-around : 两侧边有间隙,中间均匀分布

image.png flex-start : 靠主轴的左侧对齐 image.png

flex-end : 靠主轴右侧对齐

image.png

align-items

设置垂直方向对齐的方式，默认值是stretch。

center: flex-start : 靠副轴的上侧对齐

image.png flex-end : 靠副轴的下侧对齐 image.png baseline : 靠flex元素第一行文字基线对齐

image.png stretch : 如果不设置高度则是容器高度是flex元素的高度，设置了容器高度就大于flex的高度，那么就跟flex-start效果一样

image.png

align-content

该属性设置了多根轴线（多行）对齐方式，默认属性值是stretch。(如果轴线只有一条那么该属性不起作用) 这里是flex-direction:row; flex-wrap: wrap;

stretch ：多行占满整个副轴

image.png center : 与副轴的中点对齐 image.png flex-start : 与副轴的起点对齐 image.png flex-end : 与副轴的终点对齐 image.png space-between : 与副轴的两侧对齐，中间均匀分布 image.png space-around : 与副轴的两侧对齐且有间隙，中间均匀分布 image.png

flex 项目的属性

order

设置flex元素的排列顺序，order数值越小就排在前面，默认值为0。

 .container > div:nth-child(1) {
    order:3
    }

image.png

flex-grow

该属性设置flex元素的放大比例，默认值0

父元素加一个换行的属性 flex-wrap：wrap。
 .container > div:nth-child(1) {
   flex-grow:1
    }

image.png

flex-shrink

该属性设置了flex元素的的缩小比例，默认为1，即如果空间不足，该项目将缩小。

 .container > div:nth-child(1) {
    flex-shrink: 2;
      }

image.png

flex-basis

该属性了在分配多余空间之前，flex元素占的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

父元素加一个换行的属性 flex-wrap：wrap。
container > div:nth-child(1) {
    flex-basis: 120px;
      }

image.png

flex

该属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 最常用的是flex：1；的属性值，这里涉及到的知识还要通过公式来算，那我此处就省略，感兴趣的可以自己网上查看一下。

这里是统一设置了div宽度为100px，那么剩下的宽度就是第一个元素的
.container > div:nth-child(1) {
   flex: 1;
      }

image.png

align-self

该属性允许单个元素与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 align-self: auto | flex-start | flex-end | center | baseline | stretch;

这里父元素设置了align-items：flex-start。
 .container > div:nth-child(1) {
   align-self:flex-end;
      }

image.png

好了文章到这就结束了，希望这篇文章对大家有用；欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下；2022首次更文挑战的第2天，加油！

avatar
文章
阅读
粉丝