前端页面布局之【Flex布局】详解

简介: 前端页面布局之【Flex布局】详解

🌟前言

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。


🌟浏览器支持

🌟Flex简介

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

.box{
      display: flex; //(新版)
      display:-webkit-box; (旧版)
    }

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。


🌟Flex基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。

它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”

主轴:容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end; 交叉轴的开始位置叫做cross start,结束位置叫做cross end。

交叉轴:项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。


🌟容器属性

🌟项目排列方向

flex-direction 属性决定主轴的方向

属性 表现 表现图示
row(默认值) 从左到右
row-reverse 从右到左
column 从上到下
column–reverse 从下到上
flex-direction: row | row-reverse | column | column-reverse

兼容写法

-webkit-box-orient:horizontal | vertical
-webkit-box-direction:normal |reverse
属性 表现
horizontal 水平方向
vertical 垂直方向
normal 顺序正常
reverse 反向

🌟项目包裹方式

flex-wrap 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

属性 表现 表现图示
nowrap(默认) 不换行
wrap 换行
wrap-reverse: 换行,第一行在下方
flex-wrap:nowrap | wrap | wrap-reverse

🌟项目水平对齐方式

justify-content属性定义了项目在主轴上的对齐方式。它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

属性 表现 表现图示
flex-start(默认值) 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔都相等。
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-content:flex-start | flex-end | center | space-between | space-around

容写法

-webkit-box-pack: start | end |center |justify
属性 表现
start 左对齐
end 右对齐
center 居中
justiry 两端对齐

🌟项目的垂直对齐方式

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

align-items:flex-start | flex-end | center | baseline | stretch
属性 表现 表现图示
stretch(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐


center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。

兼容写法

属性 描述
start 顶对齐
end 底对齐
center 居中对齐
-webkit-box-align:start | end |center

🌟多行对齐方式

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

属性 表现 表现图示
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐。
space-between 与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值) 轴线占满整个交叉轴。
align-content:  flex-start | flex-end | center | space-between | space-around | stretch

🌟项目的属性

🌟项目的顺序

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

order:<int>

兼容写法

-webkit-box-ordinal-group:<int>

🌟项目占比(放大)

flex-grow

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

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍

flex-grow:<int>


兼容写法

-webkit-box-flex : <int>

🌟项目占比(缩小)

flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效

 flex--shrink:<int>

🌟项目所占空间大小

flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main

size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

  flex-basis:<size> | auto

🌟项目自己的对齐方式

优先级高于容器的 align-items


align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

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

🌟案例

<!--防止移动端兼容问题我们布局是采用两行-->
<div class="rows">
    <div><a href="javascript:;">天猫</a></div>
    <div><a href="javascript:;">聚划算</a></div>
    <div><a href="javascript:;">天猫国际</a></div>
    <div><a href="javascript:;">外卖</a></div>
    <div><a href="javascript:;">天猫超市</a></div>
</div>
<div class="rows">
    <div><a href="javascript:;">天猫</a></div>
    <div><a href="javascript:;">聚划算</a></div>
    <div><a href="javascript:;">天猫国际</a></div>
    <div><a href="javascript:;">外卖</a></div>
    <div><a href="javascript:;">天猫超市</a></div>
</div>
/* 去掉默认样式*/
body,body *{
  -webkit-text-size-adjust: 100%;
}
body,h1{
    margin: 0;
}
a,input,button{
    /*-webkit-tap-highlight-color:none;*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a{
    text-decoration: none;
}
button{
    -webkit-appearance: none;
}
/*正式布局*/
.rows{
    display: -webkit-box;
    display: flex;
}
.rows div{
    /* 所有的盒子就一样大 */
    width: 0px;
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.rows div a{
    font-size: 0.44rem;
    color: #666;
    text-align: center;
    line-height: 1.04rem;
    display: block;
}
.rows div a:before{
    content: '';
    display: block;
    margin: 0 auto;
    width: 1.72rem;
    height: 1.7rem;
    background: red;
    background-size: 1.72rem 1.7rem;
}
.rows:nth-of-type(1) div:nth-of-type(1) a:before{
    background-image: url(img/1.webp);
}
.rows:nth-of-type(1) div:nth-of-type(2) a:before{
    background-image: url(img/2.webp);
}
.rows:nth-of-type(1) div:nth-of-type(3) a:before{
    background-image: url(img/3.webp);
}
.rows:nth-of-type(1) div:nth-of-type(4) a:before{
    background-image: url(img/4.webp);
}
.rows:nth-of-type(1) div:nth-of-type(5) a:before{
    background-image: url(img/5.webp);
}
.rows:nth-of-type(2) div:nth-of-type(1) a:before{
    background-image: url(img/6.webp);
}
.rows:nth-of-type(2) div:nth-of-type(2) a:before{
    background-image: url(img/7.webp);
}
.rows:nth-of-type(2) div:nth-of-type(3) a:before{
    background-image: url(img/8.webp);
}
.rows:nth-of-type(2) div:nth-of-type(4) a:before{
    background-image: url(img/9.webp);
}
.rows:nth-of-type(2) div:nth-of-type(5) a:before{
    background-image: url(img/10.webp);
}


目录
相关文章
|
2月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
23天前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
96 57
|
8天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
8天前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
15 2
|
23天前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
26 1
|
29天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
61 2
|
28天前
多个p标签,并让div“flex”布局,且单行溢出隐藏
多个p标签,并让div“flex”布局,且单行溢出隐藏
27 0
|
28天前
|
容器
flex布局
flex布局
43 0