前端页面布局之【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);
}


目录
打赏
0
0
0
0
74
分享
相关文章
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
Bootstrap5 Flex(弹性)布局3
`.justify-content-*` 类用于调整弹性子元素的对齐方式,支持 start、end、center、between、around 等值。`.flex-fill` 类使所有子元素等宽,而 `.flex-grow-1` 则让指定子元素占据剩余空间。这些类在布局设计中非常实用。
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
3月前
|
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
67 10
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
161 10

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    15
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    39
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    详解智能编码在前端研发的创新应用
    18
  • 5
    巧用通义灵码,提升前端研发效率
    26
  • 6
    智能编码在前端研发的创新应用
    39
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    4
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    36
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等