(day15)CSS3弹性盒详解

 

目录

        弹性盒初识：

一、怪异盒模型

二、什么是弹性盒？

3、弹性盒详解

1、可以添加在父级元素上的属性，控制子级元素

1、flex-dirextion 弹性盒的默认主轴

2、justify-content 主轴对齐方式

3、align-items  侧轴对齐方式

4、flex-wrap 换行属性 

 5、align-content 行与行与之间的距离

2、可以添加在子级元素上的属性，控制单个元素

        1、align-self       控制单个子级元素在侧轴上的对齐方式

        2、order 排序优先级

        3、flex

4、圣杯布局

圣杯布局的规则

圣杯布局的思路：

---

        弹性盒初识：

        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

        长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。

        以下简单的布局需求是难以或不可能用这样的工具（ floats 和 positioning）方便且灵活的实现的：

• 在父内容里面垂直居中一个块内容。
• 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
• 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

        正如你将在后面看到的一样，弹性盒子使得很多布局任务变得更加容易。让我们继续吧！

---

一、怪异盒模型

1、标准盒模型
        content 内容区域  设置的宽高
        padding 会撑大当前容器 需要减去对应padding值
        border  盒子外面
        margin  外边距
        计算盒子大小
                自身大小 content padding border
                实际大小 content padding border margin

2、怪异盒模型(IE盒模型：当文件丢失了文档类型的时候，会触发怪异盒模型的渲染方式)
        padding 和 border 在盒子的内部，不需要减去对应设置的值
        计算盒子大小：
                自身大小 content（包含padding 和 border）    
                实际大小 content margin

 设置盒模型的属性：box-sizing
        属性值：
                标准盒模型：content-box(默认)

                怪异盒模型：border-box

二、什么是弹性盒？

弹性盒概念：控制子级元素在父级元素中的排列方式

        属性：display

        属性值：flex

特点：

        1、设置弹性盒要给父级元素添加

        2、给容器添加弹性盒之后，所有子级元素在主轴上排列        默认主轴是X轴 测轴是Y轴

        3、给容器设置弹性盒，所有子级元素可以不考虑元素类型，直接设置宽高

        4、注意：浮动在弹性盒环境不可用，盒模型和定位属性正常使用

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

 不设置弹性盒

设置弹性盒布局

section{
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
}

3、弹性盒详解

弹性盒的属性较多，可以分成两大类来记忆

1、可以添加在父级元素上的属性，控制子级元素

1、flex-dirextion 弹性盒的默认主轴

弹性盒的默认数轴是X轴，改变主轴方向

        属性值：row 默认值 X轴

                        column Y轴

                        row/column-reverse 反向排列flex元素

2、justify-content 主轴对齐方式

        属性值：flex-start        从行首位置开始排列

div#main
{
    display: flex;
    justify-content:flex-start;
}

        

                 flex-end        从行末位置开始排列

div#main
{
    display: flex;
    justify-content:flex-end;
}

                 center        居中排列

div#main
{
display: flex;
justify-content:center;
}

                 space-between        均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点

div#main
{
display: flex;
justify-content:space-between;
}

 

                 space-around        均匀排列每一个元素，每个元素周围分布相同的空间

div#main
{
display: flex;
justify-content:space-around;
}

 

         space-evenly        所有间距相等

div#main
{
display: flex;
justify-content:space-evenly;
}

3、align-items  侧轴对齐方式

        属性值：flex-start        元素在测轴起点对齐

                        flex-end        元素在侧轴终点对齐

                        center         居中对齐

                        baseline        基线对齐 ：默认情况下和flex-start一样，设置不同字体大小的时候会基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线

                         stretch        拉伸

4、flex-wrap 换行属性 

        弹性盒中子级元素总宽度大于父级元素的时候，盒子会默认进行挤压，不会往下掉 

        属性值：wrap  换行

                        nowrap 不换行

                        wrap-reserve 换行，反向

不换行：

换行：

 5、align-content 行与行与之间的距离

        属性值：flex-start

                元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

                        flex-end        元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

                         center        元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）

                        space-between        元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

                        space-around        元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

                        space-evenly        各个位置的空间均匀分布

                        initial        第一行从顶部开始排列，后面的空间均匀分布

2、可以添加在子级元素上的属性，控制单个元素

        1、align-self       控制单个子级元素在侧轴上的对齐方式

        属性值：

        2、order 排序优先级

                        属性值 数字，可负值，数字越大优先级越高 越往后显示

        3、flex

                   表示在弹性盒环境下 占据主轴上剩下的空间，并且会随着子级元素的内容而撑开

        

    
    
    
    
    


    

        

        
高度随着子级元素的内容撑开
        

    

4、圣杯布局

圣杯布局的规则

• header和footer各自占领屏幕所有宽度，高度固定。
• 中间的main是一个三栏布局。
• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

圣杯布局的思路：

• header和footer设置样式，横向撑满。
• main中的left、center、right依次排布即可
• 给main设置弹性布局 display: flex;
• left和right区域定宽，center设置 flex: 1; 即可

    
    
    
    
    


    
header
    

        
left
        
center
        
right
    
    
footer