当前位置：网站首页>flex布局
flex布局
2022-08-02 14:12:00 【叶子yes】
一、flex布局
布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为 “ 弹性布局 ” ，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
二、flex布局的属性
容器属性（给容器设置）
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
元素属性（给弹性元素设置）
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
三、flex弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。（父元素–>容器；子元素–>项目）
对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。
关于主轴和交叉轴
- 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
- 每根轴都有起点和终点，这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。
- 弹性元素也可以通过
display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要，所有属性都是作用于轴的。
1、主轴
flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局。
也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。
我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：
- 交叉轴就会相应地旋转90度。
- 弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。
2、flex-direction属性
flex-direction属性用来改变主轴的方向
取值：row(默认) | row-reverse | column | column-reverse
<style> .container{
width: 400px; height: 300px; margin: 100px auto; background-color: #ccc; display: flex; flex-direction: column-reverse; } .container div{
width: 60px; height: 50px; color: white; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
3、沿主轴的排列处理
弹性元素默认不换行，如果我们想要弹性元素换行，可以通过设置flex-wrap：wrap；使元素换行。
flex-wrap属性
用于控制项目是否换行
取值：nowrap(默认，不换行) | wrap（换行） | wrap-reverse
下列代码中，我们设置了弹性元素宽度为60px，容器宽度为300px，理论上一行放不下六个，但是使用flex布局，当容器宽度不够时，元素默认会被等比例压缩排放在一行上。
<style> .container{
width: 300px; height: 300px; margin: 100px auto; background-color: #ccc; display: flex; flex-wrap: nowrap; } .container div{
width: 60px; height: 50px; color: white; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
<div class="div1" style="background-color: red;">弹性元素4</div>
<div class="div2" style="background-color: blue;">弹性元素5</div>
<div class="div3" style="background-color: pink;">弹性元素6</div>
</div>
</body>
4、flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
5、设置元素在主轴方向的排列方式
justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
<style> .container{
width: 300px; height: 300px; margin: 0 auto; background-color: #ccc; display: flex; justify-content: flex-start; } .container div{
width: 60px; height: 50px; color: white; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
6、设置元素在交叉轴方向的排列方式
align-items属性
取值：flex-start | flex-end | center | baseline | stretch(默认，在没有设置高度的情况下)
<style> .container{
width: 300px; height: 300px; margin: 100px auto; background-color: #ccc; display: flex; align-items: stretch; } .container div{
width: 60px; /* height: 50px; */ color: white; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
stretch：在没有给弹性元素设置高度或者设置高度为auto的情况下，元素高度等于容器高度。
接下来给弹性元素高度设置为50px进行演示：
baseline：它让项目以第一行文字的基线为参照进行排列
给第二个div设置如下样式进行演示：
.container .div2{
padding: 20px;
height: 80px;
}
没有设置align-items: baseline;
设置了align-items: baseline;
align-content属性
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用，需设置flex-wrap: wrap；
默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。
<style> .container{
width: 300px; height: 300px; margin: 100px auto; background-color: #ccc; display: flex; /* 开启换行 使用多行对齐方式的前提条件 */ flex-wrap: wrap; /* 设置多行对齐 */ align-content: flex-start; } .container div{
width: 60px; height: 50px; color: white; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
四、元素属性
给弹性元素设置
1、order属性
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
<style> .container{
width: 400px; height: 300px; margin: 0 auto; background-color: #ccc; display: flex; } .container div{
width: 60px; height: 50px; color: white; } .div1{
/* 值越小越靠前，默认值为0 */ order: 3; } .div2{
/* 值越小越靠前，默认值为0 */ order: 2; } .div3{
/* 值越小越靠前，默认值为0 */ order: 1; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
2、flex-grow属性
用于决定项目在有剩余空间的情况下是否放大，默认不放大。
取值：0（不放大，默认值），1（放大）
<style> .container{
width: 400px; height: 300px; margin: 0 auto; background-color: #ccc; display: flex; } .container div{
width: 60px; height: 50px; color: white; } /* 均匀分配：给每个都设置 flex-grow: 1; */ .div1{
flex-grow: 1; } .div2{
flex-grow: 1; } .div3{
flex-grow: 1; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
均匀分配：给每个都设置 flex-grow: 1;
3、flex-shrink属性
用于决定项目在空间不足时是否缩小，默认值1，即空间不足时大家一起等比例缩小。
取值：0（不缩小），1（缩小，默认值）
<style> .container{
width: 200px; height: 200px; margin: 0 auto; background-color: #ccc; display: flex; } .container div{
width: 100px; height: 50px; color: white; } .div2{
/* 剩余空间不足是否等比例压缩 默认是1 等比例压缩 */ /* flex-shrink: 0; */ } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
没有设置flex-shrink：0；
设置了flex-shrink：0；
给第二个元素设置flex-shrink：0；后，元素没有被压缩：
4、flex-basis属性
用于设置弹性元素宽度，默认值auto，保持默认宽度。
如果给弹性元素同时设置width 和 flex-basis 属性，则flex-basis 属性生效，因为flex-basis 权值高于 width。
<style> .container{
width: 300px; height: 300px; margin: 0 auto; background-color: #ccc; display: flex; } .container div{
flex-basis: auto; height: 50px; color: white; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
5、flex 属性
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
flex:auto; 相当于(1 1 auto) 等分放大缩小flex:none; 相当于(0 0 auto) 不放大不缩小flex:1; 相当于（1 1 0px）
6、align-self 属性
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
表示继承父容器的align-items属性。如果没父元素，则默认stretch。
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch
<style> .container{
width: 400px; height: 300px; margin: 0 auto; background-color: #ccc; display: flex; align-items: center; } .container div{
width: 60px; height: 50px; color: white; } .div2{
/* 设置自身交叉轴的对齐方式 */ align-self: flex-end; } </style>
<body>
<div class="container">
<div class="div1" style="background-color: red;">弹性元素1</div>
<div class="div2" style="background-color: blue;">弹性元素2</div>
<div class="div3" style="background-color: pink;">弹性元素3</div>
</div>
</body>
边栏推荐
- 二叉树创建之层次法入门详解
- Unity-Ads广告插件
- MMD-＞Unity一站式解决方案
- Use libcurl to upload the image of Opencv Mat to the file server, based on two methods of post request and ftp protocol
- Detailed explanation of MATLAB drawing function plot
- mysql学习总结 ＆ 索引
- How to simulate 1/3 probability with coins, and arbitrary probability?
- 远程连接Ubuntu中的Mysql
- MATLAB制作简易小动画入门详解
- Mysql之MVCC
猜你喜欢
![[STM32 Learning 1] Basic knowledge and concepts are clear](/img/1c/7c4fd2d835e15ca13517c6d97e9b3a.png)
[STM32 Learning 1] Basic knowledge and concepts are clear
7.Redis
What should I do if Windows 10 cannot connect to the printer?Solutions for not using the printer
Happy, 9/28 scene collection
基于最小二乘法的线性回归分析方程中系数的估计
剑指offer：删除链表中重复的节点
利用plot_surface命令绘制复杂曲面入门详解
Mysql lock
Network Security Packet Capture
STM32LL library use - SPI communication
随机推荐
线性结构，顺序结构
剑指offer：合并两个排序的链表
Problems related to prime numbers - small notes
永久更改pip源
远程连接Ubuntu中的Mysql
5.事务管理
2.登录退出，登录状态检查，验证码
Introduction to in-order traversal (non-recursive, recursive) after binary tree traversal
mysql的索引结构为什么选用B+树?
第二十六章：二维数组
Network Security Packet Capture
MATLAB绘制平面填充图入门详解
Introduction to C language function parameter passing mode
shader 和 ray marching
Mysql lock
5. Transaction management
队列与栈
KiCad Common Shortcuts
2021-03-12
二叉树创建之层次法入门详解