粉阿吉整理(6)之------Flex 弹性盒

1. 怪异盒模型

想写上border和padding，又不想增加的时候，就可以把它变成怪异盒模型因为怪异盒模型的boder和padding都在内部。
标准盒模型只针对内容的宽度做了一个指定，没有对元素的总宽度进行指定。在让**boder和padding在内部去解析**的场合，利用border-box属性值会使得页面布局更加方便。
怪异盒模型=IE低版本盒模型=border-box

标准盒：box-sizing: content-box; 总大小=width/height+padding+border+margin
怪异盒：box-sizing: border-box; 总大小=width/height+margin

2. Flex弹性盒、弹性布局

Flex是Flexible Box的缩写，意为’ 弹性布局 '，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

.box{display:flex}/* 行内元素也可以使用flex布局 */
.box{display:inline-flex}/* * * 将对象作为内联块级弹性伸缩盒显示* flex独占一行  inline-flex可以和其他内敛块在一行* */

弹性盒模型用于决定元素在盒子里的分布方式以及如何处理盒子的可用空间。通过盒模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体的弹性布局 ，给父元素设了弹性盒以后，只对子元素有用，隔了一层就没用。

Webkit内核的浏览器，必须加上-webkit-前缀

display: -webkit-flex; /* Safari *//*注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
采用flex布局的元素，成为flex容器，他的所有子元素称呼就变成容器成员，称为容器项目*/

容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）。项目默认沿主轴排列。

3. 属性

1、flex-direction 定义项目主轴的方向（即项目的排列方向）

.box{flex-direction: row |row-reverse|column|column-reverse}/*Row(默认值)：主轴为水平方向，起点在左端。Row-reverse:主轴水平方向，起始点在右端。 Column:主轴为垂直方向，起点在上沿。 Column-reverse:主轴在垂直方向，起点在下沿
*/

2、Justify-content 定义项目在主轴上的对齐方式

.box{justify-content: flex-start |flex-end |center |space-between |space-around;}/*flex-start:默认值 左对齐 flex-end 右对齐 Center居中 Space-between 两端对齐，项目之间的间隔都相等 Space-around 每个项目两侧的间隔相等。 所以，项目之间的间隔比项目与边框的间隔大一倍。
*/

3、align-items 定义项目在交叉轴上如何对齐

.box{align-items:flex-start | flex-end | center | baseline |stretch}/*
宽度不写 由内容撑开 高度不写 默认拉伸 和平常的正好完全相反
*/

4、flex-wrap 换行

.box{flex-wrap:nowrap | wrap | wrap-reverse;}/*  Nowrap默认 不换行Wrap  换行 第一行在上方   Wrap-reverse  */

5、align-content 多根轴线的对齐方式

只要出现换行就会出现多根轴。如果项目只有一根轴线，该属性不起作用。

.box{align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

6、align-self 允许单个项目有与其他项目不一样的对齐方式 （从这里开始加给子项目）

align-self，可覆盖align-items，默认值为auto。表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item{align-self: auto | flex-start | flex-end | center | baseline | stretch;}.wrap p:nth-child(2){align-self:flex-end}

7、order 定义项目的排列顺序

数值越小，排列越靠前，默认为0

.item{order: <num>;}.wrap p:nth-child(2){align-self:stretch;order:1}

8、flex-grow 定义项目的放大比例

默认为0，即如果存在剩余空间，也不放大。

.item{flex-grow: <number>; }/**
*如果所有项目的flex-grow属性都为 1,则它们将等分剩余空间。
*如果一个项目的flex-grow属性为2,其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
**/

9、flex-shrink 定义了项目的缩小比例

默认为1，即如果空间不足，该项目将缩小。

.item{flex-shrink: <number>;}/**
*如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
*如果一个项目的flex-shrink属性为0，其他项目都为1，空间不足时，前者不缩小。
*负值对该属性无效。
**/

10、flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item{flex-basis: <length> | auto;}/**
*它可以设为跟width或height属性一样的值，则项目将占据固定空间。
**/

11、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
优先使用这个属性，浏览器会推算相关值，不写三个分离的属性。

flex 复合属性，设置或检索弹性盒模型对象的子元素如何分配空间

使用自适应窗口的弹性盒布局：通过设置flex来使盒布局变为弹性盒布局
让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

-webkit-box-flex: 1;  -moz-box-flex: 1;   -ms-flex: 1;   -webkit-flex: 1;
flex: 1;

粉阿吉整理(6)之------Flex 弹性盒相关推荐

flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)？
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序使用 order ...
flex 会使div撑满_如何讲清楚Flex弹性盒模型？(中)
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序使用 order ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
html-css13 flex弹性盒 W3school导航条另一种写法淘宝的导航条
flex弹性盒 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
最流行的布局方案 Flex 弹性盒布局详解
Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁.方便.响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的"d ...
CSS 布局 Flex弹性盒
弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器 ...
css flex: 2;,CSS 布局_2 Flex弹性盒
Unsplash 弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,从定义方面来说,弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现 ...
Flex 弹性盒基本语法
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

粉阿吉整理(6)之------Flex 弹性盒

1. 怪异盒模型

2. Flex弹性盒、弹性布局

3. 属性

粉阿吉整理(6)之------Flex 弹性盒相关推荐

最新文章

热门文章