flex布局学习

学习过程

1. 学会基本html css 掌握relative absolute布局定位写页面
2. 遇到问题,每次都调很麻烦,而且不能弹性伸缩
3. 接触到flex布局,决定去学习
4. flex布局简单来说就不设置绝对的位置,而是使用一些属性做一些默认的布局方式
5. 我们要做的就是切割布局,把复杂的布局切割成一系列简单的垂直水平布局等等
6. 最后用margin padding去微调
7. 学会flex需要掌握三步
8. 1:flex任何都分为容器和项目(容器大多数时候同时也是父容器的项目),需要弄清楚容器/项目分别的css属性,含义
9. 2:学会布局
10. 3:练手,有一个成型的页面去练手,最后总结出自己用flex的一般规律
    总结:
    1:设置父容器,看子容器是垂直还是水平或者其他 display:flex;justify-content:row;
    2:子容器用padding,margin等,微调布局
    3…待更新

学习推荐

1. b站的新浪微博flex布局案例
2. 看完
3. 踏实敲完
4. 再自己写自己要做的页面
5. 总结
6. b站案例学习网址

效果

知识点总结

Flex布局是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

基本概念

容器Container

项目 items

基本步骤

1. 首先设置子容器flex布局:display:flex;
2. 再设置方向:flex-direction:row|row-reverse|column|column-reverse;
3. 当需要换行时候:flex-wrap:wrap|wrap-reverse;
4. justify-content属性定义了项目在主轴**(水平轴)**上的对齐方式
   justify-content:flex-start|flex-end|center|space-between|space-around
5. align-items属性定义项目在交叉轴**(竖直轴)**上如何对齐。
   align-items:flex-start|flex-end|center|baseline|stretch(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度。)
6. align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。与5相同
7. 以下是设置items,当同时作为子项目的容器时,以上container属性也一样使用
8. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。order:1;(用得少)
9. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-grow:1
10. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(重要用途是)当需要不缩小比例,换行展示的情况flex-shrink:0;配合属性flex-wrap:wrap;就行
11. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
12. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

    参考详细flex教程