摘要：容器首先实现布局需要先指定一个容器，任何一个容器都可以被置顶为布局，这样容器内的元素就可以使用来进行布局。当存在多条轴线时，多条轴线在垂直方向上的布局。
在flex容器中默认存在两条轴，水平主轴和垂直的交叉轴，这是默认设置，当然可以通过修改相关属性使垂直方向变为主轴，水平方向变为交叉轴，在容器中，每个单元块称为flex item，每个flex item占据主轴空间为main size，占据交叉轴空间为cross size。
Flex容器首先实现flex布局需要先指定一个容器，任何一个容器都可以被置顶为flex布局，这样容器内的元素就可以使用flex来进行布局。
.container {
display: flex | inline-flex;
}
flex生成一个块状的flex容器盒子，inline-flex生成一个行内flex容器盒子，以下六种属性可以设置在容器上：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction.container {
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
}
flex-direction决定了主轴的方向，默认值是row。
row：主轴方向为水平方向，起点在左端； row-reverse：主轴方向为水平方向，起点在右端 column：主轴方向为竖直方向，起点在上端 column：主轴方向为竖直方向，起点在下端flex-wrap
.container {
display:flex;
flex-wrap:nowrap | warp | wrap-reverse;
}
flex-wrap决定容器内项目是否可换行，默认值nowrap。
nowrap：不换行，项目尺寸会随之调整 wrap：超出换行，且第一行在上方 wrap-reverse：超出换行，且第一行在下方flex-flow
.container {
display:flex;
flex-flow: || ;
}
flex-flow是flex-direction和flex-wrap的简写，其默认值为row nowrap
。
.container {
display:flex;
justify-content:flex-start | flex-end | center | space-between | space-around;
}
justify-content定义了项目在主轴上的对齐方式，默认值为flex-start
flex-start：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，把剩余空间等分成间隙 space-around：每个项目两侧的间隔相等align-items
.container {
display:flex;
align-items:flex-start | flex-end | center | baseline | stretch;
}
align-items定义了项目在交叉轴上的对齐方式，默认值为stretch
stretch：如果项目没有设置高度或者为auto，将占满整个容器的高度 flex-start：交叉轴起点对齐 flex-end：交叉轴终点对齐 center：中点对齐 baseline：项目的第一行文字的基线对齐align-content
.container {
display:flex;
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}
align-content：定义了多根轴线的对齐方式，如果项目只有一个轴线，那么该属性将不起作用。比如flex-wrap:nowrap;容器只有一根轴线，align-content就不起作用。默认值为stretch。当存在多条轴线时，多条轴线在垂直方向上的布局。
flex项目有以下6中定义在item上的属性：
order
flex-basis
flex-grow
flex-shrink
flex
align-self
order.item {
order:;
}
order定义项目在容器中的排列顺序，数值越小排列越靠前，默认值为0。
flex-basis.item {
flex-basis: | auto;
}
flex-basis定义了在分配多余空间之前，项目占据主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本身的宽高。flex-basis需要跟flex-grow和flex-shrink配合使用才能发挥效果。
flex-grow.item {
flex-grow:;
}
flex-grow定义项目的放大比例，默认值为0，即若果存在剩余空间，也不放大。当所有项目的flex-grow属性值为1，则它们将等分剩余空间，如果一个项目flex-grow为2，其他为1，则前者占据的剩余空间将比其他项多一倍。如果所有项flex-basis的值排列完后发现空间不够，且flex-wrap:nowrap时，此时flex-grow则不起作用。
flex-shrink.item {
flex-shrink:;
}
flex-shrink定义项目的缩小比例，默认值为1，若空间不够，且所有项的值为1，则所有项等比例缩小，如果一项flex-shrink属性为0，其他项都为1，则前者不缩小。
flex.item {
flex:auto | none | | | ;
}
flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。
auto：三个属性的值为 1 1 auto none：三个属性的值为 0 0 autoalign-self
.item {
align-self:auto | flex-start | flex-end | center | baseline | stretch;
}
algn-self允许单个项目有与其他项目不一样的对齐方式，单个项目的algn-self会覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115780.html
摘要：系统性的介绍关于布局，也作为自学的一篇文章基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。属性一个布局的页面所具有的元素可分为类。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 flex-tutorials 系统性的介绍关于flex布局，也作为自学的一篇文章 flex基础理念 使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充...
摘要：系统性的介绍关于布局，也作为自学的一篇文章基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。属性一个布局的页面所具有的元素可分为类。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 flex-tutorials 系统性的介绍关于flex布局，也作为自学的一篇文章 flex基础理念 使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充...
摘要：总之有了基础，理解弹性布局蛮容易的。语法格式当容器的设置了溢出换行属性，且当前在交叉轴方向上存在多行的情况下，该属性才会生效。 本篇文章已授权微信公众号 dasu_Android（大苏）独家发布 声明 本系列文章内容全部梳理自以下四个来源： 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入门跟...
摘要：弹性盒子基础弹性盒子是中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义属性内核浏览器的兼容设置，下同当然还有行内布局的弹性盒子注意，设为布局以后，子元素的和属性将失效。 弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。 定义一个弹性盒子 在父盒子上定义display属性： #b...
阅读 1182·2021-10-18 13:32
阅读 2218·2021-09-24 09:47
阅读 1253·2021-09-23 11:22
阅读 2384·2019-08-30 14:06
阅读 507·2019-08-30 12:48
阅读 1936·2019-08-30 11:03
阅读 457·2019-08-29 17:09
阅读 2369·2019-08-29 14:10
