Flex布局理论小结

朱雀 2020-06-19 08:39 672阅读 0赞

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

### 兼容性： ###

衍生过程：display:box -> display:flexbox \-> display:flex

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex（inline-\*）布局。

### 两条轴线（主轴、交叉轴，两者是相对的）：容器flex container; 项目flex item ###

![bg2015071004.png][]

### 容器属性： ###

flex-direction：决定主轴的方向（即项目的排列方向），主轴不是固定的，以这个值为准。  
flex-wrap：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。  
flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。（两者合并书写的方式）  
justify-content：定义了项目在主轴上的对齐方式。  
align-items：定义项目在交叉轴上如何对齐。

align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（已交叉轴为基准）

### 项目属性： ###

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。（可以为负数）

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（如果为0则不缩小）

flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。（建议优先写这种形式）(flex-grow和flex-shrink针对于剩余空间分配的比例关系)

align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

[bg2015071004.png]: /images/1592555909844.png

发表评论取消回复

表情：

评论列表（有 0 条评论，672人围观）

还没有评论，来说两句吧...

相关阅读

相关 flex布局常见用法小结

1，display：flex 　　这个在父容器中声明； 2，flex-direction:row / column 　　默认为横向，也在父容器中设置，定义flex布局的主

小咪咪/ 2023年06月03日 13:56/ 0 赞/ 9 阅读

相关 html 布局兼容性,flex布局兼容性问题小结

一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-\{\\} (eg. box-

た入场券/ 2022年10月11日 13:38/ 0 赞/ 380 阅读

相关 flex布局

转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布

港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 355 阅读

相关 flex布局

转一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS

冷不防/ 2022年03月08日 19:20/ 0 赞/ 260 阅读

相关 Flex布局

首先要有个容器，并设置display:flex;display:-webkit-flex;该容器有以下六个属性： <table> <tbody> <tr>

谁践踏了优雅/ 2022年02月27日 16:58/ 0 赞/ 292 阅读

相关 Flex布局

之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。现在总结下大概的用法。 flex是把一个div分成

待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 497 阅读

相关 Flex布局

在我看书学习flex布局有疑惑后，在网上搜到了这篇文章，讲的很详细，一遍就差不多了就懂flex布局了，感谢原作者！上上下下读五六遍，在其中纠正了一些错别字、加粗了一些文字、

秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 518 阅读

相关 flex布局

flex布局传统布局与flex布局传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f

旧城等待，/ 2021年06月24日 13:58/ 0 赞/ 587 阅读

相关 flex布局

Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便，现在越来越多的浏览器已经支持flex布局，最近出的轻...

小灰灰/ 2021年04月08日 04:13/ 0 赞/ 685 阅读

相关 Flex布局理论小结

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。兼容性：衍生过程：display:box -> display:flexb...

朱雀/ 2020年06月19日 08:39/ 0 赞/ 673 阅读