摘要：模型，通常被称为，是一种一维的布局模型。它将基于行或列控制布局，但不能同时控制布局。的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。那么超出的需要被消化通过收缩因子，所以加权综合可得。
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
基本介绍
浏览器兼容性
启用Flexbox
容器属性
行||列 对齐 ==row and columns==
水平||垂直 对齐 ==Vertical and horizontal==
更改水平对齐 ==change horizontal alignment==
更改垂直对齐 ==change vertical alignment==
关于基准线 ==about baseline==
换行 ==wrap==
flex元素上的属性
order
align-self
flex-grow
flex-shrink
flex-basis
flex
介绍Flexbox，也称为灵活盒模块，是两个现代布局系统之一，还有CSS Grid。与CSS Grid（二维）相比，flexbox是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。flexbox的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：
Table layouts
Floats
clearfix hacks
display: table hacks
兼容性IE10以下不兼容，一些浏览器需要使用-webkit或者display:-webkit-box兼容处理。
使用flexboxdisplay:flexbox
或者
display:inline-flexbox容器属性
flex-direction
justify-content
align-items
flex-wrap
flex-flow
行对齐或者列对齐flex-direction决定容器以行对齐还是列对齐。
flex-direction:row，行对齐，从左到右
flex-direction:row-reverse，行对齐，从右到左
flex-direction:column，列对齐，从上到下
flex-direction:column-reverse，列对齐，从下到上
如下图所示：
水平对齐或者垂直对齐flex-direction默认是row，从左向右，当其属性值为column时，是从上到下，可以使用justify-content和align-items改变水平和垂直对齐。
改变水平对齐方式justify-content有5个属性值：
flex-start 左对齐
flex-end 右对齐
center 居中对齐
space-between 首尾对齐容器左右侧，中间间距相等
space-around 每个元素的间距相等
改变垂直对齐方式align-items有5个属性值：
flex-start 顶部对齐
flex-end 底部对齐
center 居中对齐
baseline 基线对齐
stretch 拉伸以适应容器
关于align-items:baseline，可以看看codepen：https://codepen.io/flaviocopes/pen/oExoJR
换行默认情况下，flexbox容器中的项目保留在一行中，缩小它们以适合容器。
可以使用flex-wrap:wrap或者flex-wrap:wrap-reverse对容器中的元素进行换行处理。
一种简写方式：flex-flow:row wrap;即flex-direction:row && flex-wrap:wrap
适用于flexbox容器内每个元素的属性order
align-self
flex-grow
flex-shrink
flex-basis
flex
order-改变元素的顺序，如下图所示，可以指定某个元素的order值，以改变其位置，默认值为0 align-self-元素使用align-self覆盖容器的align-items对当前元素的对齐方式 flex-grow || flex-shrink 如有必要，可以增加或缩小某个元素flex-grow：默认值为0，当某个元素flex-grow为1，另一个为2，则为flex-grow：2的元素占用flex-grow:1的空间的2倍。
flex-shrink：默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
比如：有这么一个容器，div>.box13+.box22父容器定义宽度为500px，子元素定义宽度为120px，box1的flex-shrink为1，.box2的flex-shrink为2，那么子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 1001+1001+1001+1002+100*2=700px。
于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少： A 被移除溢出量：(100*1/700)*100，即约等于14px B 被移除溢出量：(100*1/700)*100，即约等于14px C 被移除溢出量：(100*1/700)*100，即约等于14px D 被移除溢出量：(100*2/700)*100，即约等于28px E 被移除溢出量：(100*2/700)*100，即约等于28px 最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92pxflex-basis-用于设置或检索弹性盒伸缩基准值，默认值为auto，其与width的区别可以参考这篇文章：https://www.jianshu.com/p/17b... flex：有三个属性值
flex-grow
flex-shrink
flex-basis
flex: 0 1 auto 分别对应flex-grow、flex-shrink、flex-basis结尾
友情献上小游戏，通过游戏学习flexbox
http://flexboxfroggy.com/#zh-cn
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114063.html
摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...
摘要：正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来，实现完美的居中效果。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。 参考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果没有接...
摘要：在文本前面插入一个高度为百分百的伪元素，让文本与其垂直对齐。块级元素或者使用垂直水平居中或者使用 翻译自 https://css-tricks.com/centering-css-complete-guide/ 预先给出这样的样式 .container { width: 100%; height: 200px; background-color: azur...
摘要：它用来可以处理更加复杂的布局。在容器下的子元素的宽度和比容器和小的时候起作用。按照的值减去相应大小得到子元素的值。实例截图实例查看用于当前行中的子元素进行对齐布局。子元素拉伸至充满容器。优雅的实现响应式布局。 showImg(http://i2.tietuku.com/fd0ddd6dbd15e380.jpg); flexbox layout是W3C为了更好的在网页中排版和布局而设计...
摘要：本文译自这里，针对本文介绍的属性列个提纲伸缩容器属性伸缩项目属性以后再布局时可以考虑用啦背景布局模块目前上一次工作草案的叫法旨在提供一种更高效的方式来布局排列及分配容器中项目的空间，即便容器大小是未知或动态变化的因此称为。 本文译自 A Complete Guide to Flexbox这里，针对本文介绍的属性列个提纲： 伸缩容器属性： display flex-direction...
阅读 1722·2021-09-27 14:02
阅读 2899·2021-09-27 13:36
阅读 1018·2019-08-30 12:46
阅读 1804·2019-08-30 10:51
阅读 3528·2019-08-29 17:02
阅读 903·2019-08-29 16:38
阅读 1799·2019-08-29 16:37
阅读 2914·2019-08-26 10:32
