flex布局

什么是flex布局？

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

为什么设置flex布局

1.默认文档流

：默认文档流就是对页面布局不加任何修饰，元素自动的布局方式
特点：1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。  

           2）块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。

           3）行内元素与其他元素共享一行空间，宽高由其内容所决定。

2.浮动布局；

因为元素有默认的排列方式，想要改变这种布局，使用浮动布局

1)float属性取值(如果一个元素添加folat属性，那么这个元素就会成为一个浮动元素)

 left       向左浮动元素

 right      向右浮动元素

 none       【默认值】，不浮动

 inherit    浮动方式继承父元素

 2）特点：  1）当一个元素是浮动元素的时候，它会失去对父元素的支撑。脱离了文档流

 清除浮动

 1.给父元素添加overflow：hidden；

 2.给使用浮动的元素使用伪元素:   ：：after 设置一个空元素，然后使用clear:both

 

flex布局优点：

让块级标签在一行排列，且不会产生浮动脱标现象，布局网页更简单，更灵活。

flex布局的运用.

flex相关知识：

容器和项目

什么叫容器
采用flex布局的元素被称作容器。

什么叫项目
在flex布局中的子元素被称作项目。

主轴对齐方式

属性名：justify-content

.box{

    display: flex;

    justify-content: flex-start;

    justify-content: flex-end;

    justify-content: center;

    justify-content: space-between;

    justify-content: space-around;

    justify-content: space-evenly;

侧轴对齐方式

修改主轴方向

弹性伸缩比

属性名：flex

属性值：数字（1）

意义:可设定宽高，在剩余空白间距里按主轴方向设置弹性盒子占比。

补充;在默认情况下，主轴方向靠内容撑开，侧轴方向默认拉伸。

改变主轴方向，后，没有设置宽高，则默认内容撑开盒子。具体情况，看浏览器效果（下为显示效果）

行对齐方式

以下为笔记代码：

.

截屏内容有些潦草，有错误和不足，当然非常接受了，在以后的学习作者也会进行修改喔~

前端的学习过程，很多都是案例讲解，梳理逻辑却在每一个过程中都非常重要，找到合适的模型去贴合代码运行逻辑，会更加有利于我们记住和运用代码。

此外，计算机语言就是需要大量的练习来巩固，勤于敲击键盘和打开浏览器查看效果，是最好的学习方式。

祝大家的前端学习路程顺利~

（重复以上截屏内容，可不观看。）    

/* 逻辑理解;先看主轴，

    （特别是行对齐方式）再理解对象是哪个，在哪个的基础上排序和分布 */

    /* 例如：单行的行对齐方式无效果。  */

    display: flex;

    /* 主轴对齐方式 */

    /* justify-content: flex-start; */

    /* justify-content: flex-end; */

    /* justify-content: center; */

    justify-content: space-between;

    /* between,在主轴方向上：盒子间有间隔 */

    /* justify-content: space-around; */

    /* justify-content: space-evenly; */

 

    /* 侧轴对齐方式 */

    /* align-items 控制所有盒子的侧轴对齐方式 */

     /* align-items: stretch; */

     /* 侧轴设置尺寸不能拉伸 ，没有设置尺寸才能拉伸，

     将子集高注释*/

     align-items: center;

     /* align-items: flex-start; */

     /* align-items: flex-end; */

     /* 如果想选中其中一个盒子，在侧轴排列 ：

     找到那个盒子，写结构伪类选择器

     只不过运用align-self.*/

      /* 修改主轴对齐方式： */

      /* flex-direction:column;  */

      /* flex:设置主轴方向上的比例拉伸

      主轴在水平: 控制宽

      主轴在垂直：控制高，用它也可以控制宽高*/

     

      flex-wrap: wrap;

      /* 行对齐方式，可以遮盖换行与between搭配产生的两行间隔

      使项目在侧轴方向上依次。 */

    align-content: flex-start;

    align-content: flex-end;

    align-content: center;

    align-content: space-between;

    align-content: space-around;

    align-content: space-evenly;

    /* evenly可能不能提示需要记住 */

      /* 在flex布局里，主轴靠内容撑开， 侧轴不设置值默认拉伸， */

        /* 主轴在哪个方向，控制的就是哪个方向上的比例 */

        /* 我理解为xy数轴,不仅容器内项目占位按xy轴占位

        项目间顺序

        每个项目的调整，高宽也由xy数轴， */

   

    height: 300px;

    border: 1px solid #000;

   

}

.box div:nth-child(2){

    /* 侧轴对齐方式 */

    align-self: stretch;

    /* align-self: center; */

    /* align-self: flex-start; */

    /* align-self: flex-end; */

   

}

.box  div {

    width: 200px;

    height: 100px;

    background-color: aqua;

}