flex布局

Posted 2020-10-08

最近在学前端知识时，经常听到学长们说flex布局，自己学习的时候无论w3c官方教程，还是教科书，参考书都没有说过关于布局的问题，自己找了点资料，理论加实践学习一下flex布局

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

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二：用法

1 <div class="boxface">
2       <span class="item"></span><!--flex布局里的称作flex item项-->
3 </div>

1 .boxface{
2     display:flex;/*直接将容器声明为flex布局*/
3 }

容器有六个属性，用于更改布局：

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

• 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属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目有六个属性

• order：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
• align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

三：优点：可能我现在还处在初级阶段，感觉flex与传统的float+position布局最好用的地方就是居中，其他没感觉

四： 圣杯布局

         圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导         航、主栏、副栏。其主要部分一般要求是主栏部分