标签：容器 reverse flex 元素 space 步局 对齐 11.02
语法
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：弹性盒子元素将向行起始位置对齐。
flex-end：弹性盒子元素将向行结束位置对齐。
center：弹性盒子元素将向行中间位置对齐。
space-between：弹性盒子元素会平均地分布在行里。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
(1) 设置在容器上的属性 1) flex-direction：row | row-reverse | column | column-reverse 项目的排列方向 2) flex-wrap：nowrap | wrap | wrap-reverse 是否换行 3) flex-flow：<flex-direction> || <flex-wrap> flex-direction 和 flex-wrap 的简写 4) justify-content：flex-start | flex-end | center | space-between | space-around 在水平 方向上的对齐方式5) align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐 方式 6) align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item 有多行 时) (2) 设置在项目上的属性 1) order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0 2) flex-basis：<length> | auto 定义了在分配多余空间之前，项目占据的主轴空间，浏览器 根据这个属性，计算主轴是否有多余空间 3) flex-grow: <number> 定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放 大 4) flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即如果空间不足，该项目将缩 小，负值对该属性无效。 5) flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis 的简写 默认值：0 1 auto， 即不放大，可缩小，大小就是项目本身的大 小。 6) align-self：auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其 他项目不一样的对齐方式
flex-direction属性
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
有四个值：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
display属性的值及它们的作用
(1) block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
(2) none 元素不显示，并从文档中移除。
(3) inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
(4) inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
(5) list-item 象块类型元素一样显示，并添加样式列表标记。
(6) table 此元素会作为块级表格来显示。
(7) inherit 规定应该从父元素继承 display 属性的值。
面试题： 31. 清除浮动有哪些方式 (1) 在浮动元素下方添加一个非浮动元素 <div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> <div style="clear:both;"></div> </div> 父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容 器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义 网的原则。 (2) 将父容器也改成浮动定位 <div style="float:left;"> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div> 这种方法不用修改 HTML 代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而 且有时候，父容器是定位死的，无法变成浮动。 (3) 父容器设置 overflow: hidden 或者 auto。（开启 BFC） <div style="overflow: hidden;"> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div> 缺点：一个是 IE6 不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。 (4) 利用:after 伪选择符，在父容器的尾部自动创建一个子元素 ==（推荐这种）== .clearfix:after { content: ""; display: block; clear: both; } //兼容 ie6：激活父元素的"hasLayout"属性，让父元素拥有自己的布局 .clearfix { zoom: 1; //或者 height：1%； } 32. 响应式布局原理 媒体查询，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏 幕。 33. 请解释一下 CSS3 的 Flexbox（弹性盒布局模型）,以及适用场景？ (1) 一个用于页面布局的全新 CSS3 功能，Flexbox 可以把列表放在同一个方向（从上到下排列，从 左到右），并让列表能延伸到占用可用的空间。 (2) 较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。 (3) 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。 (4) 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 (5) 常规布局是基于块和内联流方向，而 Flex 布局是基于 flex-flow 流可以很方便的用来做局中， 能对不同屏幕大小自适应。 (6) 在布局上有了比以前更加灵活的空间。 34. flex 布局 (1) 设置在容器上的属性 1) flex-direction：row | row-reverse | column | column-reverse 项目的排列方向 2) flex-wrap：nowrap | wrap | wrap-reverse 是否换行 3) flex-flow：<flex-direction> || <flex-wrap> flex-direction 和 flex-wrap 的简写 4) justify-content：flex-start | flex-end | center | space-between | space-around 在水平 方向上的对齐方式5) align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐 方式 6) align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item 有多行 时) (2) 设置在项目上的属性 1) order：<number> 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0 2) flex-basis：<length> | auto 定义了在分配多余空间之前，项目占据的主轴空间，浏览器 根据这个属性，计算主轴是否有多余空间 3) flex-grow: <number> 定义项目的放大比例。默认值为 0，即如果存在剩余空间，也不放 大 4) flex-shrink: <number> 定义项目的缩小比例。默认值: 1，即如果空间不足，该项目将缩 小，负值对该属性无效。 5) flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]flex-grow, flex-shrink 和 flex-basis 的简写 默认值：0 1 auto， 即不放大，可缩小，大小就是项目本身的大 小。 6) align-self：auto | flex-start | flex-end | center | baseline | stretch 允许单个项目有与其 他项目不一样的对齐方式 35. 设置 p 的 font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小 是否会也随着变化？ 不会。rem 是以 html 根元素中 font-size 的大小为基准的相对度量单位，文本的大小不会随着窗口 的大小改变而改变。标签：容器,reverse,flex,元素,space,步局,对齐,11.02 来源： https://www.cnblogs.com/jing--jing/p/15500355.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。