Flexbox – 更加优雅的布局 – align-content

View Github Repository Open presentation in a new window

luxiaojijan

See all presentation from luxiaojijan

Flexbox – 更加优雅的布局 – align-content

1 0

flexbox

社团技术分享会flexbox优雅的WEB布局讲稿

On Github luxiaojijan / flexbox

Flexbox

更加优雅的布局

Created by 卢小健 / @_杂烩乱炖

1.能解决什么问题？

2.能用在哪里，哪些地方可以用？

3.为什么能用，它的实现逻辑？

这能够做什么？

绝对置中

transform center

.container{
            position: relative;
        }
        .item{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
        }

flexbox

See the Pen perfectly center by 卢小健 (@luxiaojijan) on CodePen.

See the Pen vEQbEZ by 卢小健 (@luxiaojijan) on CodePen.

能用在哪里？浏览器兼容

W3C.ORG

can i use

实现逻辑

flex box

flex

flex

flex是flex-grow,flex-shrink,flex-basis的缩写形式。

flex-basis

flex-basis可以理解为我们给子元素设置的宽度。

flex-grow和flex-shrink

grow和shrink是一对双胞胎，grow在flex容器下的子元素的宽度和比容器和小的时候起作用。 grow定义了子元素的宽度增长因子，容器中除去子元素之和剩下的宽度会按照各个子元素的gorw值进行平分加大各个子元素上。

   1.计算容器还剩空间  

     available_space(容器还剩的空间）=container_size(容器宽度)-flex_item_total(子元素宽度之和)  

     2.计算增长单位  

     grow_unit(增长单位)=available_space/flex_grow_total(子元素增长因子之和)

     3.得到子元素的宽度  

     flex_item_width(子元素计算得到的宽度)=flex_basis+grow_unit*flex_grow

See the Pen pvQZoy by 卢小健 (@luxiaojijan) on CodePen.

   container_size=480px;  flex_item_total=100*3=300px;flex_grow_total=3+2+1=6

   available_space=480-300=180px;  

   grow_unit=180/6=30px;  

   子元素1的宽度为：  
   flex_item_width1=100+3*30=190px;  
   子元素2的宽度为：  
   flex_item_width1=100+2*30=160px;  
   子元素3的宽度为：  
   flex_item_width1=100+30=130px;

`shrink`则是在宽度和比容器宽度大时候，才有用。按照shrink的值减去相应大小得到子元素的值。

公式： overflow_space(溢出的宽度)

1.计算溢出的宽度 overflow_space=flex_item_total(子元素basis宽度之和)-container_width(容器宽度) 2.得到计算的子元素的宽度 item_basis:子元素设置的flex-basis；item_shrink:子元素的flex_shrink；item_shrink_sum:所有子元素flex_shrink的和。 flex_item_width(计算的子元素的宽度)=item_basis-(overflow_space*(item_shrink/item_shrink_sum))

See the Pen flex-shrink by 卢小健 (@luxiaojijan) on CodePen.

   **例子**  
   container_width=480px; item_shrink分别为3，2，1.item_basis=200px;  overflow_space=120px;
   则：  
   flex_item1_width=200-(120*(3/6))=140px;   
   flex_item2_width=200-(120*(2/6))=160px;  
   flex_item3_width=200-(120*(1/6))=180px;

align-content

See the Pen align-content demo by 卢小健 (@luxiaojijan) on CodePen.

对单行和单列不起作用，多行时才有效，需设置flex-direction:row;flex-wrap:wrap;或者flex-flow:row-wrap flex-start:行填充到容器的开始。 flex-bottom:行填充到容器的结束。 center:行居中分布 space-between:行平均分布，第一行在容器开始，最后一行在容器结束。 * space-around:行平均分布，但行与行之间有空隙。

align-items

See the Pen align items demo by 卢小健 (@luxiaojijan) on CodePen.

用于当前行中的子元素进行对齐布局。 flex-start: 子元素的上边缘对齐到行的上边缘。 flex-end: 子元素的上边缘对齐到行的下边缘。 center: 以中轴线居中。 baseline: 子元素的基线对齐。 * stretch:子元素拉伸至充满容器。

align-self

See the Pen align-self demo by 卢小健 (@luxiaojijan) on CodePen.

应用在子元素上，可以覆盖align-item来获得特殊的元素对齐。 flex-start: 子元素的上边缘对齐到行的上边缘。 flex-end: 子元素的上边缘对齐到行的下边缘。 center: 以中轴线居中。 baseline: 子元素的基线对齐。 * stretch:子元素拉伸至充满容器。

一个覆盖align-item的例子

See the Pen MYZvoX by 卢小健 (@luxiaojijan) on CodePen.

justify-content

See the Pen justify-content by 卢小健 (@luxiaojijan) on CodePen.

水平方向上的元素对齐。 flex-start: 子元素的左边缘对齐到行的左边缘。 flex-end: 子元素的右边缘对齐到行的右边缘。 center:行居中分布 space-between:行平均分布，第一在容器左边，最后一在容器右边。 * space-around:行平均分布，子元素之间有空隙。