CSS3flex弹性盒布局
⼀、基本概念
1.1 flexbox 是什么
CSS3 的新布局模式，是⼀种当页⾯需要适应不同屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。
flex 弹性盒是⼀个⼀维布局模型，可以在界⾯中的项⽬之间提供空间分布和强⼤对齐功能的布局⽅式。
所谓⼀维布局模型是指：flex 在同⼀时刻只控制⾏或列。这和⼆维布局模型 Grid Layout （同时控制⾏和列）相反。
1.2 flexbox 的两个轴
flexbox 有两个轴——主轴和交叉轴。主轴由 flex-direction 属性定义，⽽交叉轴和主轴垂直。对 flexbox 做的⼀切操作都涉及到这两个轴，flexbox 的特点是可以将内容沿着主轴或交叉轴对齐和调整。
1.3 起始线和终⽌线
flexbox 不会对⽂档的书写模式提供假设。过去，CSS 的书写模式主要被认为是⽔平的，从左到右的。现代的布局⽅式涵盖了书写模式的范围，所以不再假设⼀⾏⽂字是从⽂档的左上⾓开始向右书写, 新的⾏也不是必须出现在另⼀⾏的下⾯。
1.4 flex 容器和项⽬
⽂档中采⽤了 flexbox 的区域就叫做 flex 容器（简称”容器“）。为了创建容器， 我们把⼀个容器的 display 属性值改为 flex 或者inline-flex 。完成这⼀步之后，容器中的直系⼦元素就会变为 flex 项⽬（简称“项⽬”）。
注意：display: flex；不会继承给⼦元素。
⼆、容器属性
以下都是⽗元素的属性。
flex-direction：决定主轴⽅向（即项⽬的排列⽅向）
flex-wrap：决定项⽬是否换⾏
flex-flow： flex-direction 和 flex-wrap 的简写
justify-content：项⽬在主轴上的对齐⽅式
align-items：项⽬在交叉轴上的对齐⽅式
css布局左边固定右边自适应
align-content：控制多⾏项⽬的对齐⽅式
2.1 flex-direction
flex-direction 决定主轴⽅向、起始线和终⽌线位置。
它有四个取值：
row （默认）：主轴⽅向为⽔平⽅向，主轴的起始线是左边，终⽌线是右边
row-reverse：主轴⽅向为⽔平⽅向，主轴的起始线和终⽌线位置交换
column：主轴⽅向为垂直⽅向，主轴的起始线是上边，终⽌线是下边
column-reverse：主轴⽅向为垂直⽅向，主轴的起始线和终⽌线交换
使⽤场景：⽹页整体布局、导航栏等等
2.2 flex-wrap
flex-wrap 决定 flex 项⽬是否换⾏，可实现多⾏ flex 容器，这样做时，应把每⾏都看作⼀个新的 flex 容器。
默认情况下⼦元素是不换⾏的，如果⼀条轴线排不下，就可以设置它来换⾏。
属性值：
nowrap（默认）：不换⾏
wrap：换⾏，第⼀⾏在上⽅
wrap-reverse：换⾏，第⼀⾏在下⽅
2.3 flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写，表⽰ flex 布局的流动特性。第⼀个指定的值为 flex-direction ，第⼆个指定的值为 flex-wrap。默认值当然是 row nowrap。
2.4 justify-content
justify-content 决定项⽬在主轴上的排列（对齐）⽅式（属性决定了⽔平⽅向⼦项的对齐和分布⽅式）。
有以下取值：
flex-start （默认值）：起始线对齐（项⽬从容器的起始线开始排列）
flex-end：终⽌线对齐（项⽬从容器的终⽌线开始排列）
center：居中对齐
space-around：每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍。around是环绕的意思，意思是每个flex⼦项两侧都环绕互不⼲扰的等宽的空⽩间距，最终视觉上边缘两侧的空⽩只有中间空⽩宽度⼀半
space-between：两端对齐，项⽬之间的间隔都相等，between是中间的意思，意思是多余的空⽩间距只在元素中间区域分配space-evenly：均匀分布每个项⽬，每个flex⼦项两侧空⽩间距完全相等，项⽬之间的间隔和项⽬与边框之间的间隔相等
2.5 align-items
align-items 定义项⽬在交叉轴上的排列（对齐）⽅式。
取值：
stretch（默认值）：如项⽬没有设置⾼度，或者⾼度为 auto，则占满整个容器
flex-start：起始线对齐
flex-end：终⽌线对齐
center：居中对齐
baseline： 项⽬的第⼀⾏⽂字的基线对齐
2.6 align-content
align-content ⽤于控制多⾏项⽬的对齐⽅式，如果项⽬只有⼀⾏则不会起作⽤。
取值：
stretch（默认值）：即在项⽬没设置⾼度，或⾼度为auto情况下让项⽬填满整个容器，与align-items类似
flex-start：与交叉轴起始线对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：同上
space-around：同上
space-evenly：同上
三、项⽬属性
项⽬属性针对⼦元素。
order：定义项⽬的排列顺序
flex-grow：定义项⽬放⼤⽐例
flex-shrink：定义了项⽬的缩⼩⽐例
flex-basis：设置项⽬宽度
flex：简写属性
align-self：控制单个项⽬在交叉轴上的排列对齐⽅式
3.1 order
order 属性定义项⽬的排列顺序，数值越⼩，排列越靠前。
取值：
默认为 0，取值为整数
3.2 flex-grow
flex-grow 定义项⽬放⼤⽐例，放⼤的前提是⽗元素有⾜够空间。实际上是定义⼦元素占容器空间的份数。若没定义此属性，则空间按⾃⼰本⾝内容撑开。
grow是扩展的意思，扩展的就是flex⼦项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空⽩间隙。
注意：即使设置了固定宽度，若有剩余空间依旧会放⼤。
取值：
默认为0，不放⼤，取值为数值
3.3 flex-shrink
flex-shrink 定义项⽬缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。
注意：即使设置了固定宽度，也会缩⼩。
但如果某个项⽬的 flex-shrink 属性设置为 0 ，即使空间不⾜，⾃⾝也不缩⼩。
取值：
默认为1，正数
3.4 flex-basis
⽤于设置项⽬宽度，默认auto时，项⽬会保持默认宽度，或者以width为⾃⾝的宽度，但如果设置了flex-basis，权重会width属性⾼，因此会覆盖widtn属性。
实际上不建议对flex⼦项使⽤width属性，因为不够弹性。
取值：
默认为 auto
3.5 flex
flex 属性是 flex-grow ，flex-shrink 与 flex-basis 三个属性的简写，⽤于定义项⽬放⼤，缩⼩与宽度。默认为 flex: 0 1 auto；后两个属性值可以简写。
常⽤：flex: 1 等分容器空间，相当于 flex: 1 1 auto。
3.6 align-self
align-self 指控制单独某⼀个 flex ⼦项的垂直对齐⽅式，写在 flex 容器上的这个align-items属性，后⾯是items，有个s，表⽰⼦项们，是全体；这⾥是self，单独⼀个个体。其他区别不⼤，语法⼏乎⼀样：
align-self: auto | flex-start | flex-end | center | baseline | stretch;
唯⼀区别就是align-self多了个auto（默认值），表⽰继承⾃flex容器的align-items属性值。其他属性值含义⼀模⼀样。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。