PHP前端开发
首页 CSS正文

带你通过10个例子，了解FlexBox模型的所有属性

百变鹏仔 4周前 (09-20) #CSS
文章标签 带你

本篇文章带大家深入了解一下flexbox（弹性盒子）模型，通过10个demo示例，来详细介绍弹性盒子模型的所有属性，希望对大家有所帮助！

FlexBox（弹性盒子）模型，也就是我们常说的flex布局，现在flex布局已经是前端的主流布局方案，早就是前端必会的内容了，接下来我们一起来看一下弹性盒子模型。

相关概念

CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完成基本的了解。【推荐学习：css视频教程】

  • 尺寸(dimension)：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。

    • 定义弹性盒子模型

    CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置值为flex或inline-flex即可。

    display: flex; /* 值 flex 使弹性容器成为块级元素。 *//* 或者 */display: inline-flex; /* 值 inline-flex 使弹性容器成为单个不可分的行内级元素。 */

    以上代码就可以指定某个元素为弹性盒子模型，该元素成为伸缩容器，子元素则成为伸缩项目。

    值得注意的是如果需要兼容老版本浏览器，需要增加浏览器厂商的前缀。

    以下代码定义了一个简单的弹性盒子：

    html

    <body>  <!-- HTML 结构为父子级结构 -->  <div class="container">    <div class="item1 item">1</div>    <div class="item2 item">2</div>    <div class="item3 item">3</div>  </div></body>

    css

    .container {  display: flex;/* 忽略基本样式 */}

    效果如下：

    默认情况下，所有子元素作为伸缩项目都是沿着主轴水平排列。

    与容器有关的属性

    flex-direction属性

    CSS中的flex-direction属性指定了内部元素是如何在flex容器中布局的，定义了主轴的方向(正方向或反方向)。语法结构如下：

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

    如下代码展示了各个值的情况：

    .row {  /* 默认，水平排列 */  flex-direction: row;  height: 200px;}.row-reverse {  /* 水平排列，反向 */  flex-direction: row-reverse;  height: 200px;}.column {  /* 垂直排列 */  flex-direction: column;  margin-right: 100px;}.column-reverse {  /* 垂直排列 反向 */  flex-direction: column-reverse;}

    代码运行效果如下所示：

    justify-content属性

    CSS中的justify-content属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。

    语法结构如下：

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

    示例代码如下所示：

    .center {  justify-content: center; /* 居中 */}.start {  justify-content: flex-start; /* 左对齐 */}.end {  justify-content: flex-end; /* 右对齐 */}.between {  justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */}.around {  justify-content: space-around; /* 两端对齐，项目两侧的间隔相等 */}

    值得注意的是，实现的是伸缩项目相对于伸缩容器的对齐方式，与页面无关

    align-items属性

    CSS中的align-items属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。

    语法结构如下：

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

    示例代码如下所示：

    .center {  align-items: center; /* 居中 */}.start {  align-items: flex-start; /* 顶对齐 */}.end {  align-items: flex-end; /* 底对齐 */}

    运行效果如下所示：

    配合justify-content属性，可以做出水平垂直居中

    flex-wrap属性

    CSS中的flex-wrap属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。

    语法结构如下：

    flex-wrap: nowrap| wrap| wrap-reverse

    示例代码如下所示：

    .nowrap {  /* 单行显示 */  flex-wrap: nowrap;}.wrap {  /* 多行 */  flex-wrap: wrap;}.wrap-reverse {  /* 多行，反向 */  flex-wrap: wrap-reverse;}

    如果设置伸缩容器的宽度小于所有子元素宽度之和的话，子元素并没有自动换行也没有溢出；效果根据伸缩容器的宽度自动调整所有子元素的宽度。

    align-content属性

    CSS中的align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。

    语法结构如下：

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

    值得注意的是该属性对单行弹性盒子模型无效。

    示例代码如下：

    .center {  align-content: center; /* 居中 */}.start {  align-content: flex-start; /* 顶对齐 */}.end {  align-content: flex-end; /* 底对齐 */}.between {  align-content: space-between; /* 两端对齐，项目之间的间隔都相等 */}.around {  align-content: space-around; /* 两端对齐，项目两侧的间隔相等 */}

    值得注意的是该属性对单行弹性盒子模型无效，即：带有flex-wrap: nowrap

    flex-flow属性

    CSS中的flex-flow属性适用于伸缩容器元素，该属性是flex-direction和flex-wrap的简写属性，默认值为row nowrap。

    语法结构如下：

    flex-flow: <&#39;flex-direction&#39;> || <&#39;flex-wrap&#39;>

    与伸缩项有关的属性

    order属性

    CSS中的order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。

    语法结构

    .item {  order: <integer>}

    属性值

    值得注意的是，order仅仅对元素的视觉顺序产生作用，并不会影响元素的逻辑顺序。

    示例代码如下：

    .item1 { order: 2; }.item4 { order: -1; }

    flex-grow属性

    flex-grow属性规定在相同的容器中，项目相对于其余弹性项目的增长量，值默认为0；语法结构如下：

    .item {  flex-grow: <number>; }

    示例代码如下：

    .item2 { flex-grow: 2; }

    如果所有伸缩项目的flex-grow的值都为1，则它们将等分剩余空间；如果某个伸缩项目的flex-grow的值为2，其他为1，则前者占据的剩余空间将比其他项多一倍。

    flex-shrink属性

    flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    语法结构如下：

    .item {  flex-shrink: <number>; }

    示例代码如下：

    .item2 { flex-shrink: 2; }

    如果所有伸缩项目的flex-shrink的值都为1，当空间不足时，都将等比例缩小；如果某个伸缩项目的flex-shrink的值为0，其他为1，则空间不足时，前者不缩小。

    flex-basis属性

    flex-basis属性定义了在分配多余空间之前，项目在主轴方向上的初始大小。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    语法结构如下：

    .item {  flex-basis: <length> | auto; }

    它可以设为跟width或height属性一样的值，例如设置230px，则项目将占据固定空间。

    flex属性

    CSS中的flex属性是flex-grow、flex-shrink、flex-basis的简写属性，用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。语法结构如下

    flex: auto | initial | none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]

    flex属性可以指定1个、2个或3个值。

    单值语法：值必须为以下其中之一:

    双值语法：第一个值必须为一个无单位数，并且它会被当作的值。第二个值必须为以下之一：

    三值语法:

    align-self属性

    CSS中align-self属性适用于伸缩容器元素,于设置伸缩项目自身元素在侧轴的对齐方式。该属性可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性；语法结构如下所示：

    align-self: center| flex-start| flex-end| baseline| stretch;

    示例代码如下：

    .start { align-self: flex-start; }.center { align-self: center; }.end { align-self: flex-end; }

    写在最后

    本篇文章到这就结束了，这里给大家推荐一个学习Flex布局的一个游戏：

    Flexbox Froggy - 一个用来学CSS flexbox的游戏

    地址：https://flexboxfroggy.com/#zh-cn

    挺有意思的，练习flex布局可以试试。

    原文地址：https://juejin.cn/post/7065296076995035166

    作者：一碗周

    （学习视频分享：web前端入门视频）

    文章推荐
    最新文章
    标签列表
    关于我们 | 联系我们 | 网站地图
    本站为非盈利性网站,不接受任何赞助和广告。
    特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com
    互联网ICP备案： 陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客