Css布局-伸缩盒笔记

前言

    伸缩盒（flex）作为css3中的布局标准，相比常规流、float、position，有其独特的优势，我们必须对其进行熟悉。

伸缩盒子布局的优势

    伸缩是最大的优势，具体如何体现的伸缩，请继续向下学习，逐个攻破。

伸缩容器与伸缩项目

当一个元素使用以下任意一个css属性修饰，该元素称为伸缩容器

display: flex

display: inline-flex （用的少）

它的所有直接子元素，都成为了伸缩项目

注意点

1、一个html元素既可以是伸缩容器，也可以是伸缩项目

2、孙子元素都不是伸缩项目

3、成为伸缩项目后，元素之前的属性，全部块状化

举个例子

<style>

    .hello {

          display : flex;

    }

</style>

<div class="hello">

    <p>我是第一个伸缩项目</p>

    <p>我是第二个伸缩项目</p>

</div>

主轴方向

默认：水平方向是主轴，从左到右

start在左、end在右

主轴修改后，侧轴跟着自动修改，没有修改侧轴的属性，元素自动沿着主轴方向排列（测试的侧轴从上到下）

flex-direction: row; //默认值

flex-direction: row-reverse;  //改为从右到左，此时侧轴没有变化

flex-direction: column; //改为从上到下的主轴，此时侧轴一定会与主轴【垂直】，变为了从左到右

flex-direction: column-reverse; //改为从下到上的主轴，此时侧轴由于跟着主轴【垂直】，也是从左到右

这个需要侧轴跟着【垂直】的策略，真happy

侧轴方向

默认：垂直方向是侧轴，start在上，end在下，从上到下

注意

1、不必关注交叉点，要关注方向

主轴的换行方式

默认：每个item(伸缩项目）自动变窄，默认情况，每个html元素都很会过日子，宁愿牺牲宽度，也要在一排，这体现伸缩的缩

flex-wrap: rowwrap; //默认值，不换行，紧巴巴的过日子

flex-wrap: wrap; //包含，多余的换行

主轴方向很会过日子，侧轴方向不会过日子，开始浪费了，因为侧轴也能调整，后续研究侧轴

，这个时候再出现一个11，侧轴决定不浪费了，真够伸缩的……

讲的好，牛逼！也能从父元素中溢出，太多的时候

flex-wrap: wrap-reverse; //方向换行

 

往上换行也是醉了

复合属性

仅需了解，纯属给自己找麻烦，同时指定……

flex-flow: row wrap;

竟然是复合的是

flex-direction: row;

flex-wrap: wrap;

主轴对齐方式

左对齐、居中对齐、右对齐，元素少的时候才能看出来

justify-content: flex-start; //默认值，对齐到主轴的起始位置，得看主轴怎么配置的

justify-content: flex-end; //对齐到主轴的结束位置

justify-content: cener; //对齐到主轴的中间位置

justify-content:  space-around; //item之间是2倍、距离start与end是1倍距离

justify-content：space-between: //item之间均匀分配，距边缘没有距离

justify-content: space-evenly; //item之间、距离边缘都是相等的,均匀的分配

space-between用的比较多……

主轴方向用的最长用的，从左到右

侧轴的对齐

竟然一个控制单行，另一个控制多行，真够变态的！

单行和多行的对齐用的属性不同！

卧槽特地把元素的高度调整成不一样的

align-items : flex-start; //表示侧轴的起始位置对齐

align-items: flex-end; //结束位置对齐

align-items: center; //侧轴的中间位置对齐

align-items: baseline; //基线位置对齐，看下字体改变后效果

align-items: stretch; //拉伸对齐，如果所有伸缩item没有高度的时候，会生效，直接充满父容器，这是默认值

笔记很好

看下多行的侧轴对齐

看最高的元素，算作一行

align-content: flex-start; //侧轴起始位置对齐

align-content: flex-end; //侧轴结束位置对齐

align-content: center; //侧轴的中间位置对齐

align-content: space-around; //空间，红色是绿色的2倍，伸缩项距离相等，边缘距离的2倍

align-content: space-between; //伸缩item之间的距离相等，边缘没有距离

align-content: space-evenly; //伸缩item绝对平分，边缘距离也平分

align-content: stretch; //item没有高度时，所有item充满父元素，并平分，这是默认值

笔记不错

没写完，卧槽，讲的太快了

元素的水平垂直居中

第一个方案

display: flex;

justify-content: center;

align-items: center;

第二个方案

display: flex;

子元素item

margin: auto;

所有元素水平的方案都有啥？卧槽

item在主轴的基准长度

flex-basis: 300px; //此时会将width的宽度挤掉，将伸缩项的基准长度，若主轴是水平的，widht失效，若主轴是纵向的，高失效

但是主轴方向的可以修改的

flex-basis: auto //默认值，原本元素的值不变

浏览器会用该属性计算空间？

伸缩性

缩都说了，该说伸了，默认看样子没有拉伸啊，剩余空间还有300px

一个属性，用于瓜分剩下的空间

flex-grow: 1; //表示所有伸缩项目都是1， grow值/所有grow值的总数，1/3，有点像android中的layout-weight

这个属性用于在设定了宽度或者高度的使用，可以拉伸到父容器

flex-grow: 0; //表示不拉伸，这是默认值

有箭头的时候，表示元素是拉伸过来的

再来聊聊缩

父元素的空间不够的时候，每个item就得压缩

想缩，不要使用flex-wrap: wrap; 

使用默认值即可

压缩的时候，item压缩多少，是可以控制的，默认不是平均压缩的

flex-shrink: 1; //这是默认值,如果父容器空间不够，都挤一挤

压缩的分母计算，不是按照item的总数相加的，跟伸缩不一样

还要计算收缩比呢，那个300指的是剩余空间

这听的有点乱了

排序与单独对齐

要改变某个item主轴的排序了，可以改变视觉顺序，每个item的默认值是0

.inner2 {

    order: -1;

}

单独调整某个item的侧轴对齐，这个属性也牛逼，但是用的不多

.inner2 {

    align-self: flex-end;

}

来个项目感受一下

基本的重置样式

先做背景铺满全屏

body默认有宽度，没有高度,body也是个元素，靠内容撑开

html也没有宽和高

body铺满

当容器与背景图不匹配的时候，有空白，使用background-size: cover;

先写结构

后写样式

加入header中的结构

接着写样式（之前用的float，现在用flex）

需要a元素与ul的共同的父容器，即header，为header加入flex，默认效果出来了

justify-content：space-between

发现侧轴没有居中，单行改变对齐方式

algin-item:center

看来写flex布局，是从巨到细的写，写啥不是这么写啊，都一样

接下来对文字也做flex布局

顶部的这个css用到牛逼

看看大佬的设计稿

踩到一个父元素没有高度的状况

css新的calc()，这里可以写运算了，100vh表示视口高度的100%

100vh - 70就能算出来高度了，牛逼了，下面能做了

为每个橙色布局开启flex，更改主轴方向，为了练习flex

这里直接放大了，侧轴的对齐方式还得改，改变了主轴，侧轴到底咋变的……

总结

flex布局应该是现在css中最常用的布局方式了，不学不行啊，加油。