摘要：同时定义了伸缩容器的主轴和侧轴。伸缩项目向一行的中间位置靠齐。伸缩项目会平均地分布在行里。伸缩项目的外边距盒在该行的侧轴上居中放置。默认值伸缩项目拉伸填充整个伸缩容器。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
flexbox 研究
研究flexbox需要清楚一个概念，主轴和交叉轴的概念，而这两个轴是可以交换的
flexbox的样式属性主要作用于两个部分，一个是伸缩容器，一个是伸缩子项目
容器样式display: flex | inline-flex
设置这个属性就代表当前这个元素变成了伸缩容器，一个是块状容器，一个是行内块状容器
flex-direction: row | row-reverse | column | column-reverse
flex-direction代表主轴布局方向
row: 左－> 右 ，row-reverse: 右 -> 左 ，column：上 －> 下 ，column-reverse：下 －> 上
flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap:代表的是超出布局的元素如何显示，分别是不换行，换行，换行之后从右向左排列
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。
justify-content: flex-start | flex-end | center | space-between | space-around
主轴方向的对其方式
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
align-items: flex-start | flex-end | center | baseline | stretch
定义伸缩项目交叉轴在当前行的对齐方式
flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
center：伸缩项目的外边距盒在该行的侧轴上居中放置。
baseline：伸缩项目根据他们的基线对齐。
stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
定义伸缩项目在伸缩容器内部的对齐方式
同上
伸缩项目样式order:
子元素顺序
flex-grow:(默认值为： 0)
根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
flex-shrink:(默认值为： 1)
根据需要用来定义伸缩项目收缩的能力。
flex-basis:| auto (默认值为： auto)
这个用来设置伸缩基准值，剩余的空间按比率进行伸缩。
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写
align-self: auto | flex-start | flex-end | center | baseline | stretch
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111930.html
摘要：本文译自这里，针对本文介绍的属性列个提纲伸缩容器属性伸缩项目属性以后再布局时可以考虑用啦背景布局模块目前上一次工作草案的叫法旨在提供一种更高效的方式来布局排列及分配容器中项目的空间，即便容器大小是未知或动态变化的因此称为。 本文译自 A Complete Guide to Flexbox这里，针对本文介绍的属性列个提纲： 伸缩容器属性： display flex-direction...
摘要：分配空间原理影响布局分配空间的属性有三个，分别是和。伸缩项目扩展宽度项目容器宽度项目宽度或项目设置的总和对应的比例拉伸后伸缩项目宽度原伸缩项目宽度扩展宽度我们来计算一下上面栗子中第一个伸缩项目拉伸后的宽度。 在项目中，我们还会大量使用到flexbox的新旧属性，但大多数人一般只会写新属性，旧属性交由autoprefixer处理，但其实完成同样功能的新旧属性表现形式却不尽相同。还有部分人...
摘要：完整的说法是属于同一个的俩个相邻的的会发生重叠，与方向无关。元素会位于与与之间，使得宽度缩短。简单的说，有了之后，布局不再局限于单个维度了。 什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式...
阅读 1332·2021-09-04 16:40
阅读 3458·2021-07-28 00:13
阅读 2880·2019-08-30 11:19
阅读 2614·2019-08-29 12:29
阅读 3169·2019-08-29 12:24
阅读 1124·2019-08-26 13:28
阅读 2388·2019-08-26 12:01
阅读 3447·2019-08-26 11:35
