CSS布局之display：flex（二）

Augus
497 阅读2分钟

「这是我参与11月更文挑战的第一天，活动详情查看：2021最后一次更文挑战」。

前言

2021最后一次更文挑战，无需多言，开搞！！！

上一章我们说flex布局的主轴、交叉轴以及容器中的父容器，今天我们就来说一下子容器。具体请看我上一篇文章CSS布局之display：flex。

容器

容器：分为 父容器（container)和 子容器（item）。

子容器

align-self

align-self：设置当前元素在交叉轴上（cross axis）的位置。如果当前设置了align-items，会覆盖调已有的align-items。

image.png

  • align-sign：flex-start; // 起始端对齐

image.png

  • align-self：end; // 末端对齐。

  • align-self:center; // 居中对齐。

  • align-self : baseline; // 基线对齐，默认对齐第一行文字的基线。

上面三个个属性，这里就不过多赘述了，懂得都懂(*￣︶￣)。

  • align-self : strech; // 拉伸对齐。

image.png

拉伸的高度为所在父容器的高度。

flex

flex属性是flex-grow、flex-shrink和flex-basis的简写，所以一提到简写，他肯定就可以有一个值，两个值以及三个值的写法。不过先别急，我们先来说说这三个属性的功能。

  • flex-grow：设置子容器尺寸在原基础的增长倍数。

  • flex-shrink：设置子容器的收缩规则。子容器仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

  • flex-basis：指定了子容器在主轴方向上的初始大小，默认是自身内容的尺寸。

// 一个值, 无单位数字: flex-grow
flex: 2;

// 一个值, width/height: flex-basis
flex: 10em;
flex: 30px;
flex: min-content;

// 两个值: flex-grow | flex-basis
flex: 1 30px;

// 两个值: flex-grow | flex-shrink
flex: 2 2;

// 三个值: flex-grow | flex-shrink | flex-basis 
flex: 2 2 10%;

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！

avatar
文章
阅读
粉丝