Flex 布局知识点梳理

番茄西红柿发布于2019-04-23 13:30 / 3011人阅读

摘要：传统的布局方案，在针对特殊布局时会很不方便，比如垂直居中，把一个容器等分为列等等。设为布局以后，子元素的和属性将失效。要设置一个元素采用布局，只需设置器属性取值为即可。默认值主轴为水平方向，起点在左端。

传统的布局方案，在针对特殊布局时会很不方便，比如垂直居中，把一个容器等分为N列等等。自从 Flex 出现以后，这些都迎刃而解了，本文对Flex相关内容做一个简单梳理。

什么是 Flex

Flex 是 Flexible Box 的缩写，意为”弹性布局”，任何一个容器都可以指定为Flex布局。设为 Flex 布局以后，子元素的 float、clear和vertical-align属性将失效。要设置一个元素采用 flex 布局，只需设置器 display 属性取值为 flex 即可。

.flex-box{
    display:flex;     /* or inline-flex*/
}

常用术语

采用 Flex 布局的元素，称为Flex容器。其子元素为flex item，本文称其为”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

flex container : Flex容器，简称容器
flex item : Flex容器的子元素，可称其为 flex 项目，简称项目
main axis : 主轴，水平轴，起始位置称为 main start，结束位置称为 main end
cross axis: 交叉轴，垂直轴，开始位置叫做 cross start，结束位置叫做 cross end

项目默认沿 main axis 排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

flex-direction :flex-direction属性决定主轴的方向（即项目的排列方向）。
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap: 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
flex-flow : flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
CSS .box { flex-flow: || ; }
justify-content: justify-content属性定义了项目在主轴上的对齐方式。
align-items: align-items属性定义项目在交叉轴上如何对齐。
align-content: align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性

order 定义项目的排列顺序，数值越小越靠前
flex-grow 定义项目的放大比例
flex-shrink 定义项目的缩小比例
flex-basis 定义在分配多余空间之前，项目占据的主轴空间
flex 是 grow shrink basis 的简写。取值 none | [ ? || ]
align-self 定义当前项目的对其方式。取值 auto | flex-start | flex-end | center | baseline | stretch

写在后面

本文地址：https://www.cnblogs.com/kelsen/p/8647896.html

关于本文如果您有任何建议或疑问请在下面留言交流，也可通过 Web前端高级工程师群进行线上沟通。

云服务器 GPU云服务器 flex布局梳理多云管理平台调研,流程梳理 flex

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1970.html

css3 flex弹性盒子布局梳理，打通任督二脉

摘要：挺早就接触了的布局，深入使用也就是在近期移动端开发。属性用于设置或检索弹性盒模型对象的子元素如何分配空间。所以，项目之间的间隔比项目与边框的间隔大一倍。默认值是，也就是不进行缩放，占原来元素内容宽度大小。　　挺早就接触了css的flex布局，深入使用也就是在近期移动端开发。老来多健忘，只能自己梳理一下知识点，当做温故知新吧。，请原谅小白的才疏学浅，写的不到位的地方请指正。　　flex属性...

Yumenokanata 2019-04-23 13:09 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
前端入门5-CSS弹性布局flex

摘要：总之有了基础，理解弹性布局蛮容易的。语法格式当容器的设置了溢出换行属性，且当前在交叉轴方向上存在多行的情况下，该属性才会生效。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入门跟...

王晗 2019-04-23 13:14 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0