弹性布局Flex

最新推荐文章于 2023-06-16 14:25:52 发布
最新推荐文章于 2023-06-16 14:25:52 发布
阅读量104 收藏
点赞数
分类专栏： web 文章标签： css html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46379561/article/details/117407398
版权

什么是弹性布局

弹性布局Flexbox

Flexbox 是 flexible box 的简称（灵活的盒子容器），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

为什么要使用弹性布局

在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

基本概念

  • flex容器：采用flex布局的元素
  • flex项：又称flex子元素，是需要布局的元素
  • 排列方向（direction）：决定了 flex 项的布局方向
  • 主轴：默认为容器的水平方向
  • 侧轴：默认为容器的垂直方向

设置flex布局：display:flex

给父容器添加CSS语句：display:flex
即可把容器设置为flex布局，其子容器会受flex布局影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        #flex1{				/*父容器*/
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;	/*父容器设置为flex布局*/
        }
        #item1{				/*子容器1*/
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 50px;
        }
        #item2{				/*子容器2*/
            width: 300px;
            height: 300px;
            background: yellow;
            font-size: 50px;
        }
        #item3{				/*子容器3*/
            width: 300px;
            height: 300px;
            background: grey;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="flex1">
        <div id="item1">
            1
        </div>
        <div id="item2">
            2
        </div>
        <div id="item3">
            3
        </div>
    </div>
</body>
</html>

在这里插入图片描述

flex容器的属性

flex布局中只能在父容器中使用的属性有6条：

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • align-content
  • flex-flow

容器之flex-direction

设置主轴的方向，它有四个属性：
row：默认值，主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上方
column-reverse：主轴为垂直方向，起点在下方

flex-direction:row-reverse
主轴为水平方向，起点在右端

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row-reverse;
        }
</style>

在这里插入图片描述

flex-direction:column
主轴为垂直方向，起点在上方

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:column;
        }
</style>

在这里插入图片描述
flex-direction:column-reverse
主轴为垂直方向，起点在下方

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:column-reverse;
        }
</style>

在这里插入图片描述

以下演示例子主轴均取默认值。

容器之justify-content

设置主轴上子元素的排列方式，它有5个属性：
flex-start：默认值，左对齐
flex-end：右对齐
center：在主轴居中对齐
space-around：平分剩余空间，项目之间间隔相等
space-between：先两边贴边，再平分剩余空间

justify-content:flex-start
默认值，左对齐

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            justify-content:flex-start;
        }
</style>

在这里插入图片描述
justify-content:flex-end
右对齐

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            justify-content:flex-end;
        }
</style>

在这里插入图片描述

justify-content:center
在主轴居中对齐

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            justify-content:center;
        }
</style>

在这里插入图片描述
justify-content:space-around
平分剩余空间，项目之间间隔相等

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            justify-content:space-around;
        }
</style>

在这里插入图片描述
justify-content:space-between
先两边贴边，再平分剩余空间

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
        }
</style>

在这里插入图片描述

容器之align-items

设置侧轴上的子元素排列方式（单行），有4个属性：
flex-start：默认值，从上到下
flex-end：从下到上
center：垂直居中（默认主轴和侧轴时）
stretch：拉伸

align-items:flex-start
默认值，从上到下

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-items:flex-start;
        }
</style>

在这里插入图片描述
align-items:flex-end
从下到上

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-items:flex-end;
        }
</style>

在这里插入图片描述
align-items:center
垂直居中

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-items:center;
        }
</style>

在这里插入图片描述
align-items:stretch
拉伸（子元素未设置宽度时）

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-items:stretch;
        }
</style>

在这里插入图片描述

容器之flex-wrap

设置子元素是否换行，它有2个属性：
nowrap：默认值，不换行
wrap：换行

flex-wrap:nowrap
默认值，不换行，如所有子元素的长度之和超过父容器，则子项目长度自动压缩，不会不会超出父容器

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            flex-wrap:nowrap;
        }
</style>

在这里插入图片描述
flex-wrap:wrap
换行

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            flex-wrap:wrap;
        }
</style>

在这里插入图片描述

容器之align-content

设置侧轴上的子元素排列方式并且只能用于子项出现换行的情况（多行），在单行无效果，它有6个属性：
flex-start：默认值，子元素从侧轴头部开始排列
flex-end：子元素从侧轴尾部开始排列
center：子元素在侧轴居中显示
space-around：子元素在侧轴平分剩余空间，项目之间间隔相等
space-between：子元素在侧轴两边贴边，再平分剩余空间
stretch：子元素高度平分父元素高度

align-content:flex-start
默认值，子元素从侧轴头部开始排列

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-content:flex-start;
        }
</style>

在这里插入图片描述
align-content:flex-end
子元素从侧轴尾部开始排列

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-content:flex-end;
        }
</style>

在这里插入图片描述
align-content:center
子元素在侧轴居中显示

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-content:center;
        }
</style>

在这里插入图片描述
align-content:space-around：
子元素在侧轴平分剩余空间，项目之间间隔相等

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-content:space-around;
        }
</style>

在这里插入图片描述
align-content:space-between
子元素在侧轴两边贴边，再平分剩余空间

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-content:space-between;
        }
</style>

在这里插入图片描述
align-content:stretch
子元素高度平分父元素高度（子元素高度未指定时）

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-direction:row;
            align-content:stretch;
        }
</style>

在这里插入图片描述

容器之flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap。使用这个属性时可使用上述两个属性的属性值，例如：flex-flow: row wrap

flex-flow:row wrap

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            flex-flow: row wrap;
        }
</style>

在这里插入图片描述

flex项目（子元素）的属性

flex布局中只能在子元素中使用的属性有6条：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

项目之order

改变项目的排列顺序，数值越小，排列越前，默认为0

<style>
        #flex1{
            width: 1200px;
            height: 700px;
            border: 1px solid red;
            margin: auto;
            display: flex;
            /*父容器不能定义order*/
        }
        #item1{
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 50px;
            order: 1;
        }
        #item2{
            width: 300px;
            height: 300px;
            background: yellow;
            font-size: 50px;
            order: 2;
        }
        #item3{
            width: 300px;
            height: 300px;
            background: grey;
            font-size: 50px;
            /*未定义order，默认为0*/
        }
        #item4{
            width: 300px;
            height: 300px;
            background: blue;
            font-size: 50px;
            /*未定义order，默认为0*/
        }
        #item5{
            width: 300px;
            height: 300px;
            background: orange;
            font-size: 50px;
            order: 3;
        }
    </style>

在这里插入图片描述

项目之flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，即定义每个子元素所占父元素的空间的比例大小

  <style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
        }
        #item1{
            background: pink;
            font-size: 50px;
            flex-grow: 0;
        }
        #item2{
            background: yellow;
            font-size: 50px;
            flex-grow: 1;
        }
        #item3{
            background: grey;
            font-size: 50px;
            flex-grow: 5;
        }
        #item4{
            background: blue;
            font-size: 50px;
            flex-grow: 0;
        }
        #item5{
            background: orange;
            font-size: 50px;
            flex-grow: 0;
        }
    </style>

在这里插入图片描述

项目之 flex-shrink

定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
        }
        #item1{
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 50px;
            flex-shrink: 1;
        }
        #item2{
            width: 300px;
            height: 300px;
            background: yellow;
            font-size: 50px;
            flex-shrink: 2;
        }
        #item3{
            width: 300px;
            height: 300px;
            background: grey;
            font-size: 50px;
            flex-shrink: 3;
        }
        #item4{
            width: 300px;
            height: 300px;
            background: blue;
            font-size: 50px;
            flex-shrink: 1;
        }
        #item5{
            width: 300px;
            height: 300px;
            background: orange;
            font-size: 50px;
            flex-shrink: 1;
        }
    </style>

在这里插入图片描述

项目之flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间

<style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
        }
        #item1{
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 50px;
            flex-basis: 10%;
        }
        #item2{
            width: 300px;
            height: 300px;
            background: yellow;
            font-size: 50px;
            flex-basis: 20%;
        }
        #item3{
            width: 300px;
            height: 300px;
            background: grey;
            font-size: 50px;
            flex-basis: 30%;
        }
        #item4{
            width: 300px;
            height: 300px;
            background: blue;
            font-size: 50px;
            flex-basis: 40%;
        }
        #item5{
            width: 300px;
            height: 300px;
            background: orange;
            font-size: 50px;
            flex-basis: 50%;
        }
    </style>

在这里插入图片描述

项目之flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0、1和auto，可以理解为项目所占的父元素空间的比例大小

    <style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
        }
        #item1{
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 50px;
            flex: 5;
        }
        #item2{
            width: 300px;
            height: 300px;
            background: yellow;
            font-size: 50px;
            flex: 4;
        }
        #item3{
            width: 300px;
            height: 300px;
            background: grey;
            font-size: 50px;
            flex: 3;
        }
        #item4{
            width: 300px;
            height: 300px;
            background: blue;
            font-size: 50px;
            flex: 2;
        }
        #item5{
            width: 300px;
            height: 300px;
            background: orange;
            font-size: 50px;
            flex: 1;
        }
    </style>

在这里插入图片描述

项目之align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。它有6个属性：
auto：默认值，从上到下
flex-start：元素位于容器的开头
flex-end：元素位于容器的结尾
center：垂直居中（默认主轴和侧轴时）
stretch：元素被拉伸以适应容器
baseline：元素位于容器的基线上

   <style>
        #flex1{
            width: 1200px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            display: flex;
        }
        #item1{
            width: 300px;
            height: 300px;
            background: pink;
            font-size: 50px;
            align-self: auto;
        }
        #item2{
            width: 300px;
            height: 300px;
            background: yellow;
            font-size: 50px;
            align-self: flex-start;
        }
        #item3{
            width: 300px;
            height: 300px;
            background: grey;
            font-size: 50px;
            align-self: flex-end;
        }
        #item4{
            background: blue;
            font-size: 50px;
            align-self: stretch;
        }
        #item5{
            width: 300px;
            height: 300px;
            background: orange;
            font-size: 50px;
            align-self: baseline;
        }
    </style>

在这里插入图片描述

怎么取名啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display flex 左右_css display:flex 属性
weixin_33387339的博客
02-01 2259
一：display:flex 布局display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align...
flex的命名规范
11-17
flex的命名规范 flex4.5 flex的命名规范 flex4.5
自己想的有关Flex的命名规则
weixin_30758821的博客
03-02 156
1.文件名 大写开头Main.mxml2.类名 大写打头CustomEdit.as3.控件 简写+名称<mx:Buttonid="btnOk">4.事件处理函数小写打头+"Handle"startHandle()5.事件类 大写打头+"Event"RightClickEvent6.事件标识 全部大写EVENT_RIGHT_CLICK7.名称空间小写打头xm...
自己的Flex命名规则
cypbkd的专栏
06-28 931
<br />Flex 命名规范  <br />ButtonBar: bbr_ <br />Button: btn_ <br />ChechBox: chbx_ <br />ControlBar: clbr_ <br />ComboBox: cmbx_ <br />Canvas: cnv_ <br />DateField: dfl_ <br />DataGrid: dgrd_ <br />Form: frm_ <br />Grid: grd_ <br />HBox: hbx_ <br />HDividedBo
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
弹性布局-flex布局.zip
05-18
移动web端之flex布局笔记，包含案例和实战代码
Flex弹性布局详解
09-29
形象生动讲解CSS布局，Flex弹性布局生动形象的理解，更好的理解弹性布局
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
flex弹性布局用法笔记
01-20
flex弹性布局display:flex介绍1.flex-direction:row|row-reverse|column|column-reverse|initial|inherit (盒子排列方向)2.flex-wrap: nowrap|wrap|wrap-reverse(拆行或拆列)附加：flex-flow（1，2的结合写法）3....
css flex 弹性布局详解
09-24
主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
display:flex属性
weixin_46380993的博客
02-29 5万+
什么是display:flex？（我来自逆战班） Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 1：先来了解一下display:flex 正常情况下 在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下 盒子内的4个div就...
display:flex；弹性布局
weixin_45786214的博客
12-09 1387
前言：文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误还望告知，感谢！！！
浅谈CSS3中display属性的Flex布局
时清云的博客
09-10 493
最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 } 编译之后的效果很明显，界面的布局也很合理，看起来很
display：flex布局
weixin_40544688的博客
08-20 310
关于flex布局，我觉得它在布局里简直就是一匹黑马，不愧为弹性布局 阮一峰大神有一篇博客，讲的超级详细 （http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）地址献上.... 下面来举例一下 我平时是什么场合派它上战场 1、左右居中 HTML &lt;div class="wrapper"&gt; &lt;d...
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 10万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
display: flex自我理解
yang792508465的博客
04-18 1万+
我眼中的弹性盒子 display: flex意思是弹性布局，弹性布局简直不要太好用，今天就来和大家具体讲讲它的属性和用法吧。 flex的属性（以下五个属性语法都是加在父元素身上的。） 一 1. flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse 显示为行。但方向和row属性值是反的，在水平方向上为从右往左。 column 显示为列 方向为在垂直方向上从上到下 column-rever
弹性布局（display:flex；）属性详解
AnnGreen的博客
06-23 311
原文链接：https://www.cnblogs.com/hellocd/p/10443237.html它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。在 Flexb
弹性布局 flex布局
最新发布
08-22
Flex布局，也称为弹性布局，是一种浏览器提倡的布局模型。它的特点是可以更简单、灵活地布局网页，避免了浮动脱标的问题。通过使用Flex布局，我们可以精确灵活地控制块级盒子的布局方式，避免浮动布局中脱离文档流...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值