Flex各种常用布局示例

最新推荐文章于 2024-07-31 12:16:44 发布
最新推荐文章于 2024-07-31 12:16:44 发布
阅读量878 收藏 1
点赞数
文章标签： css css3 html
原文链接：https://juejin.cn/post/7078634784096223245
版权

flex布局的特性

操作方便，布局极为简单，移动端应用很广泛

布局原理：flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

父元素设置

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否允许换行
  4. align-content：设置侧轴上的子元素的排列方式（多行）
  5. align-items：设置侧轴上的子元素排列方式（单行）
  6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

主轴对齐

改变轴向

默认为X轴

改变轴向 对齐方式也会随着改变

常用的就是改为Y轴：如以下代码

  <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

全部属性：

换行

默认值为nowrap不换行

换行需满足条件子元素宽度大于父元素宽度

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

居中对齐

<style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

靠左对齐

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: flex-start;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

靠右对齐

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

优先两边对齐

再平均分配剩余空间

如果只有两个元素，则会紧贴左右两边各一个

  <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: space-between;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

元素周围相同的空间

导致行首以及行尾空间较小

均匀排列每个元素 每个元素周围分配相同的空间

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: space-around;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

平均分配空间

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            justify-content: space-evenly;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

侧轴单行对齐

如轴向改成Y轴则为居中对齐 靠左 靠右

单行居中对齐

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

单行靠上

<style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: flex-start;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

单行靠下

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

侧轴多行对齐

居中对齐

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

多行靠上

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

多行靠下

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

多行优先两边对齐

再平均分配剩余空间

如果只有两个元素，则会紧贴上下两边各一个

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

多行元素周围相同的空间

导致行首以及行尾空间较小

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

多行平均分配

 <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            flex-wrap: wrap;
            align-content: space-evenly;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

子元素

默认的宽度由内容撑开

默认的高度为父元素的高度

如轴向改为Y轴则宽度为父元素的宽，高度则由内容撑开

子元素平分宽度

平分父元素的宽度(高度则需要把轴向改为Y轴)

flex: 1;

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
        }

        .son:nth-child(2) {
            background-color: pink;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

子元素自己在侧轴的对齐方式

如改变轴向为Y轴 那对齐方式则为靠左 靠右 以及居中对齐

靠上

   <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son:nth-child(2) {
            background-color: pink;
            align-self: flex-start;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

靠下

<style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son:nth-child(2) {
            background-color: pink;
            align-self: flex-end;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

居中

    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 1px solid orange;
            margin: 50px auto;
            display: flex;
            align-items: center;
        }

        .son:nth-child(2) {
            background-color: pink;
            align-self: center;
        }

        .son {
            flex: 1;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
复制代码

 

漠冰的痛
关注
基本布局_flex基本布局模板_flex_
09-30
可以实现flex布局的基本功能，flex的基本布局模板
使用flex布局实现,7种经典布局案例
baidu_21349635的专栏
09-01 4631
flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *!/* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *//* flex-basis定义该项目在分配主轴空间之前提前获得200px的空间 *//* flex-grow定义该项目不分配剩余空间 *//* flex-grow定义main占满剩余空间 *//* flex-grow定义该项目不分配剩余空间 *//* flex-grow定义main占满剩余空间 */
少小白学前端——css篇(flex布局)
最新发布
Another_World_Naraku的博客
07-31 2133
其中，采用该样式的元素被称为容器（container），而它的子元素则称为item。容器上默认有两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis），子元素item则根据轴线排列。
超详细的flex弹性布局+实例分析
热门推荐
xw1193195009的博客
04-11 1万+
1.基本概念 什么是flex？ flex全称是FlexibleBox，即弹性盒子，用来进行弹性布局，弹性布局也是目前前端应用最广的布局之一。 flex布局的优点，为什么要用flex布局？ 1.可以为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 2.更加符合响应式设计的特点，方便页面在不同设备上的布局显示。 主要概念介绍 main axis：主轴，如果内部元素是横向排列的，那么此时x轴是主轴，如果内部元素是纵向排列的，则主轴为y轴。 cross axis：交叉轴，与主轴垂直的轴
Flex 布局教程：实例篇
weixin_51341611的博客
03-21 1169
介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅。我的主要参考资料是的文章和。
flex布局（理论+案例解释）
H-rosy的博客
08-31 2791
flex是flexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。并且子元素的display为inline-block属性。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex局 常见父项属性： 一下六个属性是对父元素进行设置的： flex-direction：设置主轴方向 justify-content：设置主轴上子元素的、、、...
Flutter常用的布局和事件示例详解
01-20
其中，Flex布局（包括Row和Column）支持主轴和交叉轴的概念，通过flex属性来指定每个子Widget在主轴上的占比。Stack则允许我们在一个区域内按层次放置Widget，使用Alignment或 Positioned来指定每个子Widget的位置。...
Flex3 界面布局教程 第二篇
10-29
在Flex 3中，布局容器提供了灵活的布局选项，可以通过各种属性来调整组件的位置和尺寸，例如width和height属性来指定组件的尺寸，direction属性来控制组件的排列方向等。通过这些布局容器和属性，开发者可以创建出既...
Flex中AdvancedDataGrid的用法示例介绍
10-26
在Flex开发中，AdvancedDataGrid组件是一个常用的显示表格数据的组件，其功能比基础的DataGrid组件更为强大，支持更加复杂的数据显示需求，例如显示多层表头、支持拖拽排序等。在某些情况下，当需要展示具有复杂数据...
web前端开发常用布局demo
09-20
通过学习和实践“web前端开发常用布局demo”中的示例，你可以提升自己的布局设计能力，更好地适应各种项目需求。同时，不要忘记持续关注Web开发的新趋势和技术，例如Web Components、Shadow DOM等，以便保持技能的...
【CSS3】flex布局实践篇 | 7种常见网页布局方案
weixin_57031986的博客
01-31 3532
【CSS3】flex布局实践篇 | 7种常见网页布局方案
详细讲解flex布局
weixin_47192981的博客
02-06 1万+
关于flex布局基础知识差不多介绍完了，这个布局是我平时使用很多的一个布局，可以解决很多手动排版以及图片与文字对齐等等的问题，希望大家可以掌握好这个布局，会十分得心应手！即，定义时要将flex定义在父元素，把父元素当做‘容器’，然后改变内部子元素的排列方式。如上图，父元素宽度已经不能承载所有子元素放到一行，但是由于没有设置换行，所以会压缩子元素，强制排到一行。在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。主轴和交叉轴是垂直的，两个轴的由来取决于子元素的排列方式，如图。
常用的flex布局
为人民服务
06-28 6938
【代码】常用的flex布局。
Flex布局详解
qq_34141545的博客
06-11 591
任何元素都可以使用flex布局（弹性布局），例如：块元素可以用display:flex，行内元素用display:inline-flex;不同浏览器可以使用不同的前缀flex，比如-webkit-flex,-o-flex,-moz-flex,-ms-flex,分别对应谷歌，欧朋，火狐，ie浏览器。 采用flex容器的元素，称为容器。所有子元素就变成其容器成员，即为flexItem项目。 针对容器有六个属性： flex-direction属性决定主轴的方向，即flexItem项目的方向。其值有row(默认值
【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-16 4863
一、横向导航栏实现核心要点 1、固定定位下面的布局设置 2、设置横向导航栏弹性布局 3、弹性布局主轴和侧轴设置 4、二倍精灵图 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
Flex布局详解及相关案例
zxdznyy的博客
09-03 1331
在学Flex布局时，我们应当已经了解了流式布局，及百分比布局。可以参考博客流式布局之京东首页案例进行复习。兼容性：Flex布局相较于传统布局来说极为简单，但是在PC端兼容性较差，在移动端则可以任意使用。当然，如果PC端不需要考虑兼容性问题，也可以考虑使用Flex布局。现在我们来对Flex有一个最初的体验： div中有三个span。 如图所示，我们希望给span宽度并做出如下效果，需要先将span利用display设置为行内块元素，再设置浮动。 但此时此刻，如果我们不给子元素加上display：block与设
常见的flex布局方案
小白小白从不日别的博客
07-06 697
flex常见的布局方案，比如：不定项居中对齐、均分列布局、子项分组布局等
flex布局
qq_50260510的博客
03-13 507
是一种浏览器提倡的布局模型，布局网页更简单、灵活，还可以避免浮动脱标的问题，非常适合结构化布局。父元素添加 display: flex，子元素可以自动的挤压或拉伸。在Flex布局模型中，可以通过调节主轴或侧轴的对齐方式来设置盒子之间的间距。弹性容器、弹性盒子、主轴、侧轴 / 交叉轴。
css flex布局示例
04-05
以下是一个简单的CSS Flex布局示例： HTML： ``` <div class="container"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> </div> ``` CSS： ``` .container { display: flex; justify-content: space-between; align-items: center; } .item { width: 100px; height: 100px; background-color: #ccc; } .item-1 { order: 2; } .item-2 { order: 1; } .item-3 { order: 3; } ``` 解释： - `display: flex`：将容器设置为Flex布局。 - `justify-content: space-between`：将容器中的项目在主轴上分布，使它们之间的间隔相等。 - `align-items: center`：将容器中的项目在交叉轴上居中对齐。 - `order`：根据项目的order属性，可以更改项目的顺序。在这个示例中，我们将项目2放在项目1的前面，将项目3放在项目1的后面。 效果： ![flex布局示例](https://cdn.jsdelivr.net/gh/YueHub/PicBed/img/20210913132709.png)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值