本文目录

  • 概述
  • 属性
    • 弹性容器的属性（父级）
      • display
      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • align-items
      • align-content
      • gap, row-gap, column-gap
    • 弹性项目的属性（子项）
      • order
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex
      • align-self
  • 示例

概述

在 flex 布局模型中，flex 容器的子级可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套（水平内垂直，或垂直内水平）可用于构建二维布局。

CSS 灵活框布局模块 Level 1 – W3C 候选人推荐

在真正了解之前，我一直使用float进行布局，但了解了Flex布局之后，发现它是个超好用的排版工具，也是它拯救了我，用它来做网页非常容易达到响应式，因为它有极强大的适应能力，可以随着网页缩放去改变比例。

flex 布局背后的主要思想是：让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。

Flex 布局表面上类似于块布局、常规布局（基于垂直的块和基于水平的内联）。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如floats和columns。但似乎最重要的是，与常规布局相反，Flex布局与方向无关。Flex可用于Web 应用程序和复杂的网页，通可以自由分配空间和对齐内容。

但在大型的布局情况下我更推荐Grid网格布局。当然在我们还没学习到的情况下不需要考虑这些

我们可以看到CSDN使用了Flex布局

那么在了解了这么多信息之后，现在我们可以开始正式学习Flex布局了

属性

弹性容器的属性（父级）

display

display:flex 定义了一个弹性容器；内联或块取决于给定的值。它为所有直接子级启用了弹性上下文。

如果你想要flex的布局生效就需要提前给父元素设置 display:flex

.content{display:flex
}

我们看一个示例

<style>.content {display: flex;}.box-parent{width: 100%;border: 1px red solid;margin-bottom: 10px;}.box {width: 200px;height: 100px;background-color: black;margin: 10px;color: aliceblue;}</style><!-- 添加的情况 --><div class="box-parent content"><h1>display: flex</h1><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div><!-- 正常的情况 --><div class="box-parent"><h1>正常情况</h1><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

你能发现区别吗 ?

flex-direction

flex-direction 决定了弹性方向，它建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。

Flex 是一个单向布局概念。将弹性项目视为主要以水平行或垂直列布局。

.content{flex-direction: row | row-reverse | column | column-reverse;
}
  • row（默认）：从左到右
  • row-reverse ：从右到左
  • column : 从上到下
  • column-reverse : 从下到上


在设置了 flex-direction 之后因为默认是flex-direction:row ，这就是为什么前面的 display:flex 会默认排成一列，从左到右

flex-wrap

flex-wrap 用于包装盒子，默认情况下，弹性项目都会自己主动组合成一行。

我们可以更改它并允许使用此属性根据需要的来包装项目。

.container {flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（默认）：所有弹性项目都将在一行，当宽度不够时则会压缩空间
  • wrap : 项目将从上到下包裹成多行，当宽度不够时则会将最右边的项目向下换行
  • wrap-reverse : 项目将从下到上换行成多行。当宽度不够时则会将最左边的项目向上换行

flex-flow

flex-flow 用于设置盒子的弹性流动.

这是 flex-directionandflex-wrap 属性的简写，它们共同定义了 flex 容器的主轴和交叉轴。默认值为 row nowrap 。

属性的值的效果和上面的 column 是一样的，该属性将 flex-directionan 与 flex-wrap 进行了组合。
你可以这样使用，将两个值放一起

.content{flex-flow: nowrap row-reverse;
}

justify-content

justify-content 定义了沿主轴的对齐方式。

当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配额外的可用空间。

当项目溢出行时，它还会对项目的对齐方式施加一些控制。

.content{justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start（默认）：从 flex-direction定义的位置的开始。
  • flex-end : 从 flex-direction定义的位置末尾开始。
  • start : 在方向的开始处 writing-mode。
  • end : 方向的尽头处 writing-mode。
  • left : 在容器的左边缘，除非特殊的的要求，否则没有意义，就像start一样。
  • right : 在容器的右边缘，除非特殊的的要求，否则没有意义，就像end一样。
  • center ：项目沿线居中
  • space-between ：均匀分布在行中；第一项在起始行，最后一项在结束行
  • space-around ：均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。
  • space-evenly ：使得任何两个项目之间的间距（以及边缘的空间）相等。

这里穿插一个重要的知识点

  • safe : 使用后会变成安全对齐,“安全” 的对齐方式在溢出时改变了对齐模式，以避免数据丢失。
  • unsafe: 则关闭安全对其

例如

justify-content: safe center;

但在使用中会有浏览器兼容性问题，所以我们只要在 flex 子元素上应用 margin: auto ; 即可解决问题，不需要用 safe 关键字

align-items

align-items 定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为justify-content横轴（垂直于主轴）的版本。

你可以理解为水平位置

.content {align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）。
  • flex-start、start : 放置在横轴的开始处。
  • flex-end、end : 放置在横轴的末端。
  • center ：在横轴上居中
  • baseline ：对齐，例如基于文字基线对齐

align-content

align-content 用于对齐内容，当横轴上有额外空间时，将对齐 flex 容器的线，类似于在 justify-content 主轴内对齐单个项目的方式。

那么 align-content 有什么特点呢？和 align-items 有什么区别呢?

align-content 属性只对多行灵的活容器生效，这里 flex-wrap 设置为wrap)。align-content 在单行灵活容器下（即 whereflex-wrap设置为其默认值no-wrap）不会生效。

也就是说 align-items 的设置对象是行内成员; align-content 的设置对象是所有行，且只有在多行弹性盒子容器中才生效。

当然 align-content 的前提是这一个容器整体定义了一个高度

.content {align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • normal（默认）：默认位置，就好像没有设置一样。
  • flex-start、start ：在容器的开头。
  • flex-end、end ：在容器的末端。
  • center ：在容器中居中。
  • space-between ：均匀分布；第一行在容器的开头，最后一行在结尾。
  • space-around ：在每行周围均匀分布。
  • space-evenly ：均匀分布，周围空间相等
  • stretch : 线条伸展以占用剩余空间

gap, row-gap, column-gap

gap 属性明确控制弹性项目之间的空间。

注意是弹性项目之间的，不影响盒子边缘，和 margin 是有明显区别的。

.content{display: flex;.../* 行间距/列边距 统一设置 */gap: 5px; /* 行间距/列边距 分开设置 */gap: 5px 10px; /* 行间距/列边距 独立设置 */row-gap: 5px;column-gap: 10px;
}

它不仅适用于 flexbox，gap 适用于网格和多列布局。

弹性项目的属性（子项）

order

默认情况下，弹性项目按原顺序排列。但是，order 属性控制它们在弹性容器中出现的顺序。

.item {order: 2; /* 默认是 0 */
}

具有相同order 的节点会恢复到原来的排列。

我们可以看下面这个例子，认真思考

<style>.box-parent{display: flex;width: 100%;border: 1px red solid;margin-bottom: 10px;}.box-parent > div {width: 200px;height: 100px;background-color: black;margin: 10px;color: aliceblue;}
</style>
<div class="box-parent"><div style="order: 1;">1 <p>order:1</p></div><div style="order: 1;">2 <p>order:1</p></div><div style="order: 2;">3 <p>order:2</p></div><div style="order: -1;">4 <p>order:-1</p></div>
</div>

flex-grow

flex-grow 定义了弹性项目在必要时扩大/增长的能力。

它适合无单位的项目，它规定了项目应该占用的弹性容器内的可用空间量。

如果所有项目的 flex-grow 都设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个项目的值为2，则该项目将占用其他项目之一的两倍空间（或者至少会尝试）。

.item {flex-grow: 2; /* 默认 0 负数无效。*/
}

你可以自己试一下下面这个例子

<style>.box-parent{display: flex;width: 100%;border: 1px red solid;margin-bottom: 10px;}.box {width: 100px;height: 100px;background-color: black;margin: 10px;color: aliceblue;}
</style>
<div class="box-parent"><div class="box" style="flex-grow: 1;">1</div><div class="box" style="flex-grow: 4;">2</div><div class="box">3</div><div class="box">4</div>
</div>

flex-shrink

flex-shrink 定义了弹性项目在必要时收缩的能力。

.item {flex-shrink: 3; /* 默认是 1 */
}

注意区分， flex-grow 用于提高优先增长能力，而 flex-shrink 则是提高优先伸缩能力

flex-basis

flex-basis 定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如 10%、2rem 、100px等）或关键字。

.item {flex-basis:  | auto; /* 默认 auto */
}

flex

flex 是 flex-grow , flex-shrink 和 flex-basis 组合的简写。

第二个和第三个参数 ( flex-shrink 和 flex-basis ) 是可选的。

默认值为 0 1 auto ，但如果使用单个数值，例如 flex: 3 ，它就像设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0% 。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

align-self 会覆盖已有的 align-items 的值，两者的可取值完全一样。

两者的区别在于：伸缩容器内部某个元素在排列方式需要有所差异，此时就不能使用
align-items ，因为 align-items 作用于整体，我们希望作用于部分，这就是 align-self 的作业。

示例

一个简单的菜单栏示例

<style>* {margin: auto;padding: 0;}header {width: 90%;min-width: 600px;height: 55px;background-color: rgba(0, 0, 0, 0.062);border-radius: 0 0 20px 20px;}.list {display: flex;height: 100%;}.list>li {flex-basis: 80px;text-align: center;list-style: none;}.logo {flex-grow: 0.5;}
</style>
<header><ul class="list"><li class="logo"><div> LOGO </div></li><li><a href="#">Home</a></li><li><a href="#">Page</a></li><li><a href="#">More</a></li><li><a href="#">About</a></li></ul>
</header>

如果对您有帮助，可别忘了 点赞 / 收藏 / 评论 / 关注 支持下博主

W3C推荐的新布局模式 【CSS Flex布局】详解相关推荐

  1. flutter listview 滚动到底部_Flutter系列之Flex布局详解

    PS:长期坚持是一件很难的事. Flutter 是 Google 推出的跨平台 UI 框架,可以快速地在 Android 和 IOS 上构建高质量的应用程序,其主要特点是 Flutter 具有快速开发 ...

  2. 在html5中flex布局详解,Flex布局详解（一）

    在讲解Flex布局之前,我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路. 1.normal flow (正常流,也叫文档流)--内联元素从左往右排列 ...

  3. flex布局详解（配图-简洁易懂）

    FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要 ...

  4. Flex 布局详解 - 转自阮一峰老师

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何的盒子都可以使用它. 下面我们来看一下使用 Flex 布局的容器的属性 fle ...

  5. 最全CSS各种布局详解

    一.单列布局的实现 1.单列布局中最常用的水平居中的四种方法 同时设置父元素和子元素的样式:父元素使用text-align实现,子元素使用inline-block.这里宽高背景只是为了展示. .par ...

  6. 移动Web开发 ----- Flex布局详解

    文章目录 1 Flex布局简介 2 Flex布局基本概念 3 容器属性 3.1 display 3.2 flex-direction 3.3 flex-warp 3.4 justify-content ...

  7. flex 解析 html5,Flex布局详解

    传统的布局解决方案,在处理一些特殊的布局方式时,非常繁琐,比如垂直居中实现起来就很不方便.而Flex在布局方面能给开发者带来极大的便利. Flex,Flexible Box的缩写,意为:弹性布局. 任 ...

  8. flex 布局 详解 易懂 总结(flex-direction justify-content align-items align-content align-self)

    flex布局总结 一.父元素属性 diaplay:flex; 定义了一个flex容器 当我们为父盒子设置了flex布局以后,子元素的float,clear,vertical-align属性将失效. 伸 ...

  9. html div flex,CSS中flex布局详解

    1.浏览器flex兼容申明 dispaly:flex; display:-webkit-flex; display:-ms-flex; display:-moz-flex; display:-o-fl ...

最新文章

  1. Arduino门禁人机接口调试 Version 1.0
  2. 【Python基础】Python时间模块，超实用总结！
  3. Cpp / 拷贝构造函数的参数为什么必须使用引用类型
  4. collection集合 多少钱_Java 集合（2）-- Iterator接口源码超级详细解析
  5. 动态规划——打家劫舍||(Leetcode 213)
  6. vscode remote免密登录
  7. c++之std::distance()函数
  8. 详解java二叉排序树_java实现二叉排序树
  9. 微信小程序电商实战-购物车（上）
  10. win10 中文语言包
  11. hook 微信公众号html,Xposed实时获取微信公众号推送
  12. 《道德经》全文 (马王堆出土帛书版)
  13. APP手机测试-理论
  14. 入门力扣自学笔记118 C++ （题目编号1413）
  15. 2019年宁波顶岗实习
  16. 思考与总结：我对管理岗位的思考
  17. CAD关于图层删除图层操作（com接口c#语言）
  18. Linux下查看内存泄露的命令
  19. inital，inherit，unset
  20. html查询一张表,HTML5数据查询，表格显示功能代码教程

热门文章

  1. 验证phone是否注册微信
  2. 防抖与节流(鼠标移入事件每隔一段时间执行)
  3. 未来超乎想象，科学家预测2045年房子会说话
  4. Windows操作系统cmd/Dos批处理命令与脚本手册bat
  5. DxLib做弹幕射击游戏(一)
  6. php验证码刷新_PHP验证码刷新不了，是什么问题？
  7. 美科学家发现量子纠缠幽灵与宇宙虫洞有关
  8. 2023西安工业大学计算机考研信息汇总
  9. dwg如何转换成pdf文件？
  10. 笔记本电脑 F1 至 F12 是功能键，怎么转换成普通键