Flex 布局语法教程

最新推荐文章于 2024-04-13 06:31:55 发布

qq_31749421

最新推荐文章于 2024-04-13 06:31:55 发布

阅读量412

点赞数

分类专栏： CSS 移动端web开发文章标签： flex

本文链接：https://blog.csdn.net/qq_31749421/article/details/85482477

版权

CSS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

移动端web开发

3 篇文章 0 订阅

订阅专栏

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为Flex布局（包括行内元素）。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效，因为flex本来就是讲布局的，所以要使用它就必须要遵循人家的一定的规则。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

一共6个
在这里插入图片描述
前4个说的都是主轴的属性以及排列方式，后2个说的是侧轴的属性以及排列
3.1 flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向），它可能有4个值。

3.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
在这里插入图片描述

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

justify-content属性定义了项目在主轴上的对齐方式。它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
其中space-between:两边的都靠边，中间项目与项目间距是相等的。
space-around:两边的间距都是一样的，中间的是两边的2倍。
在这里插入图片描述

属性在这里插入图片描述
总结：以上是主轴的排列以及属性，以下是侧轴的排列以及属性
3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
在这里插入图片描述

3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content属性定义了多根轴线的对齐方式。核心是一定是盒子内部的元素超过了盒子容器的宽度（默认）出现了换行，也就是有多行才可以。该属性可能取6个值。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。这是该属性与align-items的属性的最大的区别。
在这里插入图片描述

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

4.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
在这里插入图片描述
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
在这里插入图片描述
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
在这里插入图片描述

说明：
flex-basis的默认值为auto（无特定宽度值，取决于其它属性值），浏览器将超出的空间，按照各子项basis的值的比例进行空间收缩。

图例中5定义了flex-basis:400px，其余子项定义了flex-basis:200px，我们给父容器width定义为800px，5个子项相加之后即为1200px，超出父容器400px。那么这么超出的400px需要被这5个子项消化。

假定：这5个子项的比例为1:1:1:1:2，则多出来的400px要被分为6份，于是我们可以计算子项将被移除的溢出量是多少：

flex-basis为400px的，被移除溢出量：400/6*2，即约等于133.33px

flex-basis为200px的，被移除溢出量：400/6*1，即约等于66.67px

最后实际宽度分别为：400-133.33=266.67px, 200-66.67=133.33px

flex-basis:[percentage]与[length]的计算方式类似

它可以设为跟width属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。前2个值为0 0的时候既不放大也不缩小，为0 1的时候不放大，空间不够将缩小，1 1放大也缩小
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
在这里插入图片描述
4.7完美的居中
以下实例将完美解决我们平时碰到的居中问题。

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>

</body>
</html>
``
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191015224306881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzQ5NDIx,size_16,color_FFFFFF,t_70)
第二种居中的方式：
设置diaplay:flex
justify-content: center;
align-items: center;
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191016222825379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzQ5NDIx,size_16,color_FFFFFF,t_70)
**4.8flex布局的综合应用

聖杯佈局


![在这里插入图片描述](https://img-blog.csdnimg.cn/20191016225544394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNzQ5NDIx,size_16,color_FFFFFF,t_70)

qq_31749421

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Flex 布局语法教程

一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为Flex布局（包括行内元素）。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。二、基本概念采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，简称”项目”。容器默...
复制链接

扫一扫