弹性盒子

兼容性 ：ie11+；Webkit 内核的浏览器，必须加上-webkit-前缀。 注 ： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 弹性盒子里面的子元素(div)都是iline-flex行内弹性布局 常用属性 ： 1. flex-direction 属性指定了弹性子元素在父容器中的位置。 flex-direction: row | row-reverse | column | column-reverse 2.justify-content 属性把弹性项沿着弹性容器的主轴线（main axis）对齐。 justify-content: flex-start | flex-end | center | space-between | space-around 3. align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 align-items: flex-start | flex-end | center | baseline | stretch 4.flex-wrap 属性用于指定弹性盒子的子元素换行方式。 flex-wrap：nowrap/wrap/wrap-reverse; 弹性子元素属性 ： 排序：order 用整数值来定义排列顺序，数值小的排在前面。可以为负值。 放置剩余空间：margin

关于css3中的弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，在移动端布局中是一种常见的布局方式。 CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。 display: 弹性盒子类型 box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本) inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本) flexbox:将对象作为弹性伸缩盒显示。 (伸缩盒过渡版本) inline-flexbox:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒过渡版本) flex:将对象作为弹性伸缩盒显示。 (伸缩盒最新版本) inline-flex:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最新版本) 来源： https://blog.csdn.net/wbd_wbm/article/details/102757697

<!-- # 用于学习css弹性盒子模型 - 是一种一维的布局模型.给flexbox的子元素之间提供了强大的空间分布和对齐能力 - display:flex 设置为弹性盒子 - flexbox内flex元素的默认属性 - 元素排列为一行 (flex-direction 属性的初始值是 row)。 - 元素从主轴的起始线开始。 - 元素不会在主维度方向拉伸，但是可以缩小。 - 元素被拉伸来填充交叉轴大小。 - flex-basis 属性为 auto。 - flex-wrap 属性为 nowrap。 - flexbox的两根轴线 - 主轴 - flex-direction: row; 主轴的伸缩方向 - 交叉轴垂直于主轴 - flexbox的特性是沿着主轴或者交叉轴对齐之中的元素 - 起始线和终止线的概念 - - Flex容器 - 文档中采用了flexbox 的区域就叫做flex容器. 把容器的display设置为flex或者inline-flex.里面的元素称之为flex元素 - flex-warp简写属性 - flex-flow => Formal syntat:<flex-direction>||<flex-wrap>; - flex元素上的属性 - flex-basis与flex-shrink,flex-grow就是改变了布局空白(available space)的行为 -

首先在父元素上设置弹性盒子的关键属性 display:flex; 弹性盒子有主轴和交叉轴 1.设置主轴的方向 flex-direction:row; 默认值 主轴从左到右 左对齐方式 flex-direction:row-reverse 从右到左 右对齐方式 flex-dirextion:column 主轴从下到上 在垂直方向倒序 2.设置子项是否换行 默认值 no-wrap 当子项的宽度总和超过父容器的宽度时，子项会压缩 wrap 会换行 flex-wrap:wrap; 3.设置在主轴上的对齐方式 justify-content:flex-start 默认值 从主轴开始的方向排序 justify-content:flex-end 从主轴结束的方向开始排序 justify-content:center 在主轴上自动居中 justify-content:space-between 在主轴上 平均分布 justify-content:space-around 在主轴上 分布 两端的子项距离父边框的距离相等 = 子项之间的距离相等 / 2 4.针对单行的对齐方式 align-items:stretch; 默认值 align-items:flex-start 交叉轴的开始端排列 align-items:flex-end 交叉轴的底端排序 align-items:center 在交叉轴上居中

第一种： 第二种 弹性布局 父标签中使用display:flex 如果使用弹性布局，则子元素不需要设置float即浮动但是就会有浮动的效果 justify-content:space-around justify-content:space-between justify-content:center 水平居中 align-items:center 垂直居中 flex-direction:row 默认的 纵向排列 多行时 即元素所占的大于一行时，想不要中间的间隙 align-content:center 子元素设置： flex-grow:1 作用：定义子元素放大比例 align-self: 其实就是用来覆盖父级align-ltems 垂直排列 来源： https://blog.csdn.net/jjw_zyfx/article/details/100751749

FLEX布局是什么？ .box{ display: flex; } Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 设置为Flex布局后，子元素的 float 、 clear 和 vertical-align等 属性将失效。 二、Flex基本概念 用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 三、Flex容器的属性 flex-direction 属性决定主轴的方向（即项目的排列方向）。 flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 justify-content justify-content属性定义了项目在主轴上的对齐方式。 align-items align-items属性定义项目在交叉轴上如何对齐。 align-content align-content属性定义了多根轴线的对齐方式

CSS3弹性盒子（Flex Box） 1、flex-direction属性指定了弹性子元素在父容器中的位置 flex-direction:row | row-reverse | column | column-reverse flex-direction的值有： row：横向从左到右排列（左对齐），默认的排列方式 row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面。 column：纵向排列。 column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。 2、justify-content属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 justify-content语法如下： justify-content：flex-start | flex-end | center | space-between | space-around flex-strat：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被防止在改行的main-start边线，而后续弹性项依次平齐摆放。 flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的mian-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。 center

flex弹性盒子 若需将容器设置为flex容器 首先 div设置为flex容器 div { display : flex ; } flex-direction决定子元素的排列方向 1，row 主轴水平方向，子元素从左向右 例 < div class = "My" > < div > < / div > < div > < / div > < div > < / div > < / div > . My { display : flex ; flex - direction : row ; } row-reverse主轴水平方向，但起点在容器右端 .My{ flex-direction:row-reverse; } column:主轴为垂直方向，起点在容器上沿； .My{ flex-direction:column; } column-reverse 主轴为垂直方向，起点在容器下沿 .My{ flex-direction:column-reverse; } flex-wrap规定若一行放不下，如何换行 默认情况下，容器里面的所有内容都排在一条线上 <1>nowrop(默认)不换行 div{ flex-direction:row; flex-wrap:nowrop; } wrap换行，第一行在上方 div{ flex-diection:row; flex-wrap:wrap; }

弹性盒子： 　　　　定义：弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。 　　　　　　　主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。 　　新旧版本的弹性盒子模型：　 　　　　　在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。 　　　　　而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹性盒子模型淘汰是必然，随着手机端的兼容性逐渐提升，旧版本必将被淘汰。 　　　　　 另外，新版本具有更加强大的功能，也值得我们进行深度的学习。 　　　　　那么我们对于新旧两个版本的弹性盒子模型，我们只需要抱着对比的心态学习即可，掌握新版本，了解旧版本，这样即使有一天我们需要使用旧版本，也可以非常容易的学习旧版本的弹性盒子模型。 　　相关概念： 　　　　　　 主轴： 我们以元素排在一行为例，当元素排列在一行的时候，主轴既表示元素排列的方向，横向排列则主轴即可以理解为一条横线， 　　　　　　　　　又因为我们元素默认是从左向右排列

1 多列布局 1.1 多列布局介绍 实现类似于报纸的布局方式 ) 1.2 多列布局的相关CSS属性 columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> column-width 设置每列的宽度（类似于最小宽度） ： 用长度值来定义列宽。不允许负值 auto： 根据 <' column-count '> 自定分配宽度 column-count 设置列数 ： 用整数值来定义列数。不允许负值 auto： 根据 <' column-width '> 自定分配宽度 column-gap 设置列与列之间的间隙 ： 用长度值来定义列与列之间的间隙。不允许负值 normal： 与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 column-rule 列与列之间的边框,复合属性 同border类似 column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> column-rule-width 列与列之间的边框厚度 ： 用长度值来定义边框的厚度。不允许负值 medium： 定义默认厚度的边框。 thin：