弹性布局-更优秀的Flex

最新推荐文章于 2023-06-19 09:11:32 发布
最新推荐文章于 2023-06-19 09:11:32 发布
阅读量325 收藏
点赞数
分类专栏： Web前端 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby_hua/article/details/105952517
版权

Flex布局详解

浮动布局的优缺点

  • 图文的环绕显示；
  • 浮动元素 同行显示；
  • 适配性更好；
  • 忘记清浮动-高度坍塌；

flex布局的优缺点

  • IE10以下不支持；
  • 用来做布局的，很方便；

flex布局

  • flex/flexible(弹性布局)

  • 移动端用的最多，PC越来越多；


两个重要概念

  • 外边开启flex布局的元素叫 flex container；
  • flex container 里边的直接子元素叫做 flex items；

如何开启flex布局

设置display属性为flex或者inline-flex

<html>
    <title></title>
    <style>
    .box {
        /* 两个值：
        flex：块级 block-level形式的flex container
        inline-flex：行内 inline-level形式的flex container
         */
        display:flex;
    }
    </style>
    <body>
        <div class="box">
            <div></div>
            <div></div>
        </div>
    </body>
</html>

flex布局模型

flex container：

  • main axis（主轴）

    • main size
    • main start
    • main end

  • cross axis（交叉轴）

    • cross size
    • cross start
    • cross end

flex item

…


主轴是会变的：

  • 主轴/交叉轴方向改变；
  • 主轴、交叉轴交换；

flex相关的属性

应用在flex container上的CSS属性

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

应用在flex items上的CSS属性

  • flex
  • flex-grow
  • flex-basis
  • flex-shrink
  • order
  • align-self
  • margin（补充属性，详见文末）

flex container属性详解

flex-direction

flex items 默认是沿着main axis从main strat 向 main end方向排布；

flex-direction决定了主轴的方向，默认值row，共四个值；

  • row：从左-右
  • row-reverse：从右-左
  • column：从上-下
  • column-reverse：从下-上

row

123

row-reverse

321

column

1--
2--
3--

column-reverse

3--
2--
1--

justify-content

justify-content 决定了flex items在main axis上的对齐方式，共6个值：

  • flex-start（默认值）：与main start对齐
  • flex-end：与main end对齐
  • center：居中对齐
  • space-between:

    flex items 之间的距离相等；
    与main start、main end两端对齐；

  • space-evenly:

    flex items 之间距离相等；
    flex items与main start、main end 之间的距离 等于flex items之间的距离；

  • space-around:

    flex items之间距离相等
    flex items与main start、main end之间的距离是flex items之间距离的一半；

注：通过补空元素可以实现多行的间距自然等分；


示意：

flex-start

123---

flex-end

---123

center

--123--

space-between

1-2-3

space-evenly

-1-2-3-

space-around

-1--2--3-

align-items

align-items 决定了flex items 在cross axis上的对齐方式，共6个值；

  • normal（默认值）：在弹性布局中，效果和stretch一样；如果设置了侧轴方向高度效果就和flex-start一样；
  • stretch：当flex items在cross axis方向的size为auto时（没设值），会自动拉伸至填充flex container（的高度）；

    前提是不能指定高度；

  • flex-start：与cross start对齐；
  • flex-end：与cross end对齐；
  • center：居中对齐；
  • baseline：与基线对齐（第一个item的内容底部->基线，且各个item的基线都是以第一行内容为准）；

示意：

normal

stretch

123
123
123

flex-start

123
---
---

flex-end

---
---
123

center

---
123
---

baseline

---
123
-23
-3-

flex-wrap

flex-wrap 决定了flex container是单行还是多行，共3个值：

  • nowrap（默认）：单行；

    多的item会引起，全部items的宽度压缩；

  • wrap：多行；
  • wrap-reverse：反向多行（第一行在底下，后续行依次向上，items次序不变）；

示意：

nowrap

1 23456
---
---

wrap

123
456
---

wrap-reverse

---
456
123

flex-flow

flex-flow是flex-direction || flex-wrap的缩写属性，顺序任意；

flex-flow: row-reverse wrap;

align-content

align-content 决定了 多行flex items 在 cross axis上的对其方式，和justify-content类似，共7个值：

  • stretch（默认值）：不设侧轴方向高度，拉伸；
  • flex-start：与cross start对齐；
  • flex-end：与cross end对齐；
  • center：居中对齐；
  • space-between：

    flex items 之间距离相等；
    与cross start、cross end两端对齐；

  • space-around:

    flex items之间的距离相等；
    flex items与cross start、cross end之间的距离是flex items之间距离的一半；

  • space-evenly：

    flex items之间的距离相等；
    flex items与cross start、cross end之间的距离等于flex items之间的距离；


示意：

stretch

无高度

123
123
456
456

有高度

123
-2-
456
4--

flex-start

123
456
---
---

flex-end

---
---
123
456

center

---
123
456
---

space-between

123
---
---
456

space-around

---
123
---
---
456
---

space-evenly

---
123
---
456
---

flex items属性详解

order

order 决定了flex items的排布顺序；

  • 可以设置任意整数（正整数、负整数、0），值越小，越会排到前面；
  • 默认值是0；

示意：

默认

123

2的order设为10，1的order设为50，3的order设为100

213

align-self

通过align-self可以覆盖flex container设置的align-items；

  • auto（默认值）：遵从flex container的align-items设置；
  • stretch、flex-start、flex-end、center、baseline，效果和align-items的值一致；

flex-grow

flex-grow 决定了flex items如何扩展：

  • 可以设置任意非负数字（正小数、正整数、0），默认值是0；
  • 当flex container在main axis方向上有剩余size时，flex-grow属性才会生效；

如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为：

  • flex container的 剩余size * flex-grow/sum；
  • 即，按照百分比瓜分剩余size，分给每个item；

如果所有flex items的flex-grow 总和不超过1，每个flex item扩展的size为：

  • flex container 的 剩余size * flex-grow；
  • 即，按比例瓜分剩余size，但一定还有剩余；

注：flex items扩展后的最终size不能超过设置的max-width/max-height；


示意：

默认

123---

1的flex-grow设为2，2的flex-grow设为2，3的flex-grow设为1；

11223

1的flex-grow设为0.2，2的flex-grow设为0.2，3的flex-grow设为0.2；

11(0.2)22(0.2)33(0.2)--

flex-shrink

flex-wrap:nowrap;需要设置为不换行；

flex-shrink决定了flex items如何收缩：

  • 可以设置任意非负数字（正小数、正整数、0），默认值是1；
  • 当flex items在main axis方向上超过了flex container的size，flex-shrink属性才会生效；

如果所有flex items的flex-shrink总和sum超过1，每个flex item收缩的size为

  • flex items超出 flex container的size*flex-shrink/sum；

如果所有flex items的flex-shrink综合sum不超过1，每个flex item收缩的size为：

  • flex items超过flex container的size*flex-shrink；

注：收缩的宽度不能小于内容的宽；
注：flex items收缩后的最终size不能小于设置的min-width/min-height；


示意：

默认

123---

1的flex-shrink设为2，2的flex-shrink设为2，3的flex-shrink设为1；

1(-0.4*size)2(-0.4*size)3(-0.2*size)

1的flex-shrink设为0.2，2的flex-shrink设为0.2，3的flex-shrink设为0.2；

1(-0.2*size)2(-0.2*size)3(-0.2*size)超出显示0.4*size

flex-basis

flex-basis 用来设置flex items在main axis方向上base size；

  • 设置主轴上item宽度的大小；
  • 默认值是auto，也可以设置具体的宽度；

决定flex items最终base size的因素，从优先级高到低：

  • max-width/max-height/min-width/min-height
  • flex-basis
  • width/height
  • 内容本身的size

flex

flex是 flex-grow || flex-shrink || flex-basis 的简写（放大 缩小 固定宽度），flex的值可以是1个、2个或3个值；

单值语法：值必须是以下其中之一

  • 一个无单位数（<number>）：会作为<flex-grow>的值；
  • 一个有效宽度（width）值：会作为<flex-basis>的值；
  • 关键字none、auto或initial；

双值语法：第一个必须是无单位数、会作为<flex-grow>的值；
第二个值必须是以下之一：

  • 一个无单位数（<number>）：会作为<flex-shrink>的值；
  • 一个有效宽度（width）值：会作为<flex-basis>的值；

三值语法：

  • 第一个必须是无单位数、会作为<flex-grow>的值；
  • 第二个必须是无单位数、会作为<flex-shrink>的值；
  • 第三个必须是有效宽度（width）值：会作为<flex-basis>的值；

Tips CSS

文字居中：

text-align:center;
line-height:包裹块元素高度；

块水平居中：

margin: 0 auto;

补充属性

margin

在flexbox布局中有很强大的作用，如果给某个可伸缩项设置某个方向上的margin为auto，那么这个可伸缩项就会在这个方向上占用该方向的剩余空间来作为自己的这个方向上的margin；


示意：

默认

123---

1的margin-right设为auto；

1---23

baby_hua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swift 中详情页 使用 Flex 的布局
Super灬LV
09-16 1369
项目需求 根据上面的页面需求，我们可以知道使用原生来写布局效果并不是很好，因为其中牵扯着webview的自适应内容高度，这个在安卓端，用scrollview+webview就可以实现。但是在iOS端只能在wenviewdidload 后 获得webview的内容高度。但是这样做，我们不能找到一个合适的webview的预设值(高度)。在加载的时候，高度的改变就很突兀。所以我们干脆就全部使用html+
Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局
weixin_34220963的博客
09-26 106
在过去只有iphone4的时候，可以在代码里将一个可视单元的位置写死，这样是没问题的，但随着iPhone5，6的发布，屏幕尺寸有了越来越多种可能。这就要求App的UI控件具有在不同屏幕尺寸的设备上具有一定动态的可调性，实现较好的UI展示效果。     结合使用Auto Layout和Size Classes可对UI可视单元的父子关系，兄弟视图关系进行全方位的调整，而且调整精度更高。不仅能确定一个...
比flex更好用的css布局，CSS Grid 网格布局教程
weixin_30695195的博客
07-13 356
　　一、概述　　　　网格布局（Grid）是最强大的 CSS 布局方案。　　　　它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。　　　　上图这样的布局，就是 Grid 布局的拿手好戏。　　　　Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。　　　...
swift-FlebBoxLayout一个iOS中的Flexbox布局
08-15
FlebBoxLayout一个iOS中的Flexbox 布局
Swift-FlexBox:Swift 的灵活框布局实现
06-17
Swift-FlexBox Swift-FlexBox 是一个用 Swift 编写的简单轻量级的 FlexBox 实现。
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)
06-22
`用于开启flex容器，`flex-grow`、`flex-shrink`和`flex-basis`控制子元素的伸缩行为，而`align-items`和`justify-content`则用于调整元素在主轴和交叉轴上的对齐方式。 然后，我们来看Less，一种CSS预处理器。Less...
DZ-Flex-hard
03-08
这个框架的名字暗示了其在处理动态和复杂布局时的灵活性，"DZ"可能代表开发者或者团队的缩写，而"Flex-hard"则可能意味着它利用了CSS Flexbox（弹性盒布局）的特性来实现强大的布局解决方案。 在HTML5中，Flexbox是...
flex-grid-layout
03-31
"flex-grid-layout"是一个与CSS相关的布局模式，特别是针对现代浏览器的Flexbox布局，它极大地改进了传统的网格布局方式，让开发者能够更方便地创建弹性、响应式的界面。 Flexbox布局模型，全称为Flexible Box，是...
弹性网格布局
02-13
在弹性网格布局中，每个项目可以使用`flex-grow`, `flex-shrink`, 和 `flex-basis`属性来控制其大小。这些属性共同决定了项目在可用空间中的伸缩行为。同样，对于grid布局，`grid-column`和`grid-row`属性可以用来...
flexbox-navigation：使用flex box创建导航
02-13
- **flex-grow**、**flex-shrink**和**flex-basis**：定义flex项目的弹性，用于控制项目在可用空间中的增长和缩小。 总的来说，通过理解和熟练运用Flexbox，我们可以创建出高度自适应和功能丰富的导航菜单，无论是...
Swift 实现的 Flexbox 布局引擎.zip
09-24
Swift 实现的 Flexbox 布局引擎.zip,facebook/yoga的swift包装（css flexbox布局引擎）。
核心布局：Swift中的Flexbox和CSS样式的布局
02-04
核心布局：Swift中的Flexbox和CSS样式的布局
flex布局较之float布局的优点新发现
weixin_30387663的博客
11-26 1070
在项目中，常常会遇到这样的需求，要求布局如下所示，同时要求导航区的高度与内容区的高度始终保持一致，以边框或者背景作为区分。 采用float的方式布局 需要通过js来监控两个区域的高度变化，将高度的最大值作为两者的高度 采用flex的方式布局 不需要去处理高度，两者的高度会自动同步（补充：是指在没有设置高度，高度由内容撑开的情况） 转载于:https://www.cnblogs.com/...
弹性布局和浮动
l_0214的博客
09-25 1863
最近在写一个页面，看到这个页面的时候脑海中第一反应ul li创建4个li，然后进行浮动，然后继续想这个该怎么布局才好写 最后没有用ul li写改用div，创建4个大div然后再把这个分成上下2个div，写完样式浮动后我发现这个图的企业文化和招贤纳什2个图片的中间有一个比较大的间隔，我把margin，padding设置为0还是没用，然后我去百度百度说有2中方案 1.将子元素设置成display:block; 2.在父元素中设置font-size:0,用来兼容chrome，而使用letter-...
flex布局详解
qq_44864447的博客
12-06 277
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 F...
[Swift]自动布局 Masonry和SnapKit
Gamin
03-08 1655
目录 Masonry混编 SnapKit 示意​ TO Masonry混编 pod 'Masonry' func useMasonryCreateUI() { let view1 = UIView(); view1.backgroundColor = .blue; view.addSubview(view1); let view2 = UIVie...
Swift 纯代码布局框架 SnapKit 入门教程
weixin_41770661的博客
01-09 398
https://www.jianshu.com/p/332b816cd3e4
【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局
最新发布
前端知识分享喵
06-19 2142
布局模型是基于盒模型基础上进行的拓展，关于布局有流式布局（标准的布局），浮动布局、定位布局、flex布局等。。。
Head First HTML 和 CSS
baby_hua的专栏
03-19 1142
Head First HTML 和 CSS 13-第二版：读书笔记；这是一本十分简单的入门数据，读的目标是对CSS有一个完整和清晰的认识； CSS简述及引用 使用HTML可以将网页中的内容 标记成 浏览器能够识别解析的结构 更好的展示； CSS的一种引入方式： <head> <style type="text/css"> body { ...
css flex 弹性布局详解
09-24
Flex容器是要布局的父元素，它通过设置display属性为flex或者-webkit-flex来定义。Flex项是容器内的子元素，它们具有弹性，可以根据设定的规则进行伸缩。 Flex容器有许多属性用于控制布局的行为。其中，最重要的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值