16、弹性布局（flex）

最新推荐文章于 2024-08-10 17:13:35 发布
最新推荐文章于 2024-08-10 17:13:35 发布
阅读量208 收藏 1
点赞数
分类专栏： Web前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dream_AI/article/details/107143531
版权

弹性布局（flex）

  • 相关概念
  • 容器属性
  • 子元素属性

一、相关概念

1.1、什么是Flex？

​ Flex（Flexible Box）：翻译为弹性布局，用来为盒状模型提供最大的灵活性。
​ 需要注意的是，Flex只有在支持CSS3的情况下才能生效。

1.2、Flex容器和项目

​ 采用Flex布局的元素被称为Flex容器，简称容器。它的所有子元素自动成为容器成员，也被称为项目。

1.3、主轴和交叉轴

​ 容器默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
​ 子元素默认沿主轴排列。单个子元素占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、容器的属性

<!--以下案例的HTML模板-->
<body>
    <div class="outer">
        <div class="inner" id="div1">1</div>
        <div class="inner" id="div2">2</div>
        <div class="inner" id="div3">3</div>
    </div>
</body>

2.1、flex-direction属性

flex-direction属性决定了主轴的方向，即子元素的排列方向。

  • row（默认值）：主轴为水平方向，起点位于左侧。
  • row-reverse：主轴为水平方向，起点在右侧。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    flex-direction:row;/*主轴为水平方向，起点位于左侧*/
}
.inner{
    width: 30%;
    height: 90%;
    margin-right: 10px;
    background:red;
}

在这里插入图片描述

2.2、flex-wrap属性

flex-wrap属性决定了子元素如何换行。

  • nowrap（默认）：不换行，如果一条轴线排不下则自动调整子元素的宽度，使其可以排下。
  • wrap：换行，第二条轴线位于第一条的左下方。
  • wrap-reverse：换行，第二条轴线位于第一条的左上方。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    flex-wrap:wrap;/*换行，第二条轴线位于第一条的左下方*/
}
.inner{
    width: 140px;
    height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
    background:red;
}

在这里插入图片描述

2.3、flex-flow属性

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

2.4、justify-content属性

justify-content属性定义了子元素在主轴上的对齐方式。

  • flex-start：左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：左右对齐，子元素之间的间隔都相等。
  • space-around：每个子元素的左右外边距都相等。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    justify-content: center; /*水平居中*/
}
.inner{
    width: 80px;
    height: 90px;
    margin-right: 10px;
    margin-bottom: 10px;
    background:red;
}

在这里插入图片描述

2.5、align-items属性

align-items属性定义子元素在交叉轴上如何对齐。

  • flex-start：上对齐
  • flex-end：下对齐
  • center：居中对齐
  • baseline: 子元素的第一行文字的基线对齐。
  • stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    justify-content: flex-start; /*左对齐*/
	align-items:flex-start;
}
.inner{
    width: 90px;
    margin-right: 10px;
    background:red;
}
#div1{
    height: 40px;
}
#div2{
    height: 70px;
}
#div3{
    height: 50px;
}

在这里插入图片描述

2.6、align-content属性

align-content属性定义了多根主轴线的对齐方式。如果只有一根主轴线，该属性不起作用。

  • flex-start：子元素左上对齐
  • flex-end：子元素左下对齐
  • center：子元素左中对齐
  • space-between：子元素左对齐，多根主轴线等分height。
  • space-around：子元素左对齐，每根主轴线上下的外边距都相等。
  • stretch（默认值）：轴线占满整个交叉轴。
/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    flex-wrap:wrap;/*允许换行*/
    justify-content: flex-start; /*左对齐*/
    align-content:center;/*左中对齐*/
}
.inner{
    width: 140px;
    height:30px;
    margin-right: 10px;
    background:red;
}

在这里插入图片描述

三、子元素属性

3.1、order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
}
.inner{
    width: 90px;
    height:90px;
    margin-right: 10px;
    background:red;
}
#div1{
    order:1;/*默认为0*/
}
#div3{
    order:3;
}

在这里插入图片描述

3.2、flex-grow属性

flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-grow的数值决定了各个子元素占据剩余空间的比例

3.3、flex-shrink属性

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

  • flex-shrink的数值决定了各个子元素在空间不足时缩小的比例

3.4 flex-basis属性

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

3.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

4.6 align-self属性

align-self属性允许单个子元素有与其他子元素不一样的垂直对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

/*CSS样式*/
.outer{
    width: 300px;
    height: 100px;
    border: 3px solid  blue;
    display: flex;
    align-items:flex-start;
}
.inner{
    width: 90px;
    height:40px;
    margin-right: 10px;
    background:red;
}
#div2{
    align-self:flex-end;/*下对齐（默认为上对齐）*/
}

在这里插入图片描述

青叶的全栈之路
关注
专栏目录
flex弹性布局
shanglinzzh的博客
09-06 217
<style type="text/css"> *{ margin: 0;padding: 0; } ul{ list-style: none; width: 500px; height: 400px; background: #aaa; display: flex; } ul li{ width: 100px; height: 100px; background: #fc5531; color: #fff; } </st
弹性布局flex
qq_57215961的博客
05-02 3500
弹性布局 使盒模型更加随心所欲的实现布局样式，使用弹性布局，让父级有能力改变子级的宽高，同时弹性布局与方向无关，适合于小规模布局 写在父级作用于子级的属性
Flex布局（弹性布局）
最新发布
ORANGE_3iING的博客
08-10 5505
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式对父容器设置的属性作用属性值设置主轴的方向row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上设置主轴上的子元素排列方式> 注意:使用这个属性之前一定要确定好主轴是哪个flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右flex-end：从尾部开始排列center：在主轴居中对齐(如果主轴是x轴则水平居中)space-around：平分剩余空间。
弹性布局
ly_521_xsy
08-09 154
CSS常用属性 弹性布局 display:flex; 弹性布局改变容器内部的布局方式：从流式布局 —> flex布局 主轴：默认为盒子水平方向，可以通过属性改变主轴方向。 交叉轴：与主轴垂直的即是交叉轴。 属性 flex-direction：容器内项目的排列方向(默认横向排列)　 常用取值：　 row ： 水平排列（左 —> 右） 　 　　 　　　row-reverse：水平排...
flex 弹性布局
飞扬_柳絮的专栏
04-10 168
参考资料: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 1、传统的布局方案：基于盒状模型，依赖 display 属性 + position属性 + float属性 2、弹性布局：(设...
Flex 弹性布局
imByte的博客
04-08 991
目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，因此这里来介绍一下何为 Flex 弹性布局。 Flex 布局可以为盒状模型提供最大的灵活性，自动弹性伸缩，合适适配不同大小的屏幕。 说明 当父盒子设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。 任何一种元素都可以指定为 flex 布局。 .wrap { display: flex } /* 行
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
2401_84152825的博客
04-19 978
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-giLHKEZa-1713474385859)]
flex布局
li_chun_can的博客
08-19 182
定义 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 模型 模型定义： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。特点：1. 每个弹性容器都有两根轴：主轴和交
弹性布局 flex布局
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值