flax布局

开发工具与关键技术：mvc

撰写时间：2021 年 8月8日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

此文献需要配合Bootstrap插件使用  参考Bootstrap使用手册

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属 性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提 出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它 已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

谈到flex布局，我不知道有多少人跟我一样，在本能的想到justify-content:center与align-items:center两条属性之后，除此之外的其它属性居然显得格外陌生。

可以说包括我在内的大部分人，都是在被flex垂直水平居中方式所惊艳后才对其有所了解，以至于在日常开发中对于flex的使用，也确实更偏向于元素对齐方式的使用。

一、Flex 布局是什么？

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

行内元素也可以使用 Flex 布局。

.box{ display: flex; }

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

   .box{ display: inline-flex; }

*设置了 Flex布局之后，子元素的 float、clear 和vertical-align失效；

   .box{  

display: -webkit-flex; /* Safari */ display: flex;

}

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子 元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平主轴（main axis）和垂直的交叉轴。主轴的开始位置（与 边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴的空间 叫做cross size

 

容器的属性

以下6 个属性设置在容器上

flex-diretion：主轴的方向（即项目的排列方向） ； 

flex-wrap：如果项目在一条轴线排不下，如何换行； 

flex-flow：flex-diretion和 flex-wrap 的简写； 

justify-content：项目在主轴上的对齐方式； 

align-items：项目在交叉轴上的对齐； 

align-content：多根轴线的对齐方式。 

flex-diretion 属性 Flex-ditrtion 属性决定主轴的方向（即项目的排列方向） 。  

 flex-diretion:row;( 默认，主轴为水平方向，起点在左端。)

flex-diretion:row-reverse;( 主轴为水平方向，起点在右端。)

flex-direction:column;( 主轴为垂直方向，起点在上沿；)

flex-direction:colum-reverse;( 主轴为垂直方向，起点在下沿；)

初来乍到，请多多指教，大神勿喷。

flex-wrap 属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap 属性定义，如果一条轴 线排不下，如何换行。 该属性可能取值以及对应的效果如下图： flex-wrap:nowrap;（默认，不换行）

flex-flows 属性 flex-flow 是 flex-direction 和 flex-wrap 属性的简写，默认值是row nowrap。

justify-content 属性 Justify-content 属性定义了项目在主轴上的对齐方式。

Justify-content:space-around;

每个项目两侧的间隔相等。所以，项目之间的间隔比 项目与边框的间隔大一倍

align-items 属性 Align-item 属性定义了项目在交叉轴上的对齐方式。

flex属性

 flex 属性是 flex-grow、flex-shrink 以及 flex-basis 的缩写，默认值为 0 1 auto。后 面 2 个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

 align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属 性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。 该属性可能取值：auto、flex-start、flex-end、center、stretch、baseline

除了 auto 之外，其他属性与 align-items 属性完全一致

这是我所学到的flax布局，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！