flex布局学习
学习过程
- 学会基本html css 掌握relative absolute布局定位写页面
- 遇到问题,每次都调很麻烦,而且不能弹性伸缩
- 接触到flex布局,决定去学习
- flex布局简单来说就不设置绝对的位置,而是使用一些属性做一些默认的布局方式
- 我们要做的就是切割布局,把复杂的布局切割成一系列简单的垂直水平布局等等
- 最后用margin padding去微调
- 学会flex需要掌握三步
- 1:flex任何都分为容器和项目(容器大多数时候同时也是父容器的项目),需要弄清楚容器/项目分别的css属性,含义
- 2:学会布局
- 3:练手,有一个成型的页面去练手,最后总结出自己用flex的一般规律
总结:
1:设置父容器,看子容器是垂直还是水平或者其他 display:flex;justify-content:row;
2:子容器用padding,margin等,微调布局
3…待更新
学习推荐
- b站的新浪微博flex布局案例
- 看完
- 踏实敲完
- 再自己写自己要做的页面
- 总结
- b站案例学习网址
效果
知识点总结
Flex布局是什么
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
基本概念
容器Container
项目 items
基本步骤
- 首先设置子容器flex布局:display:flex;
- 再设置方向:flex-direction:row|row-reverse|column|column-reverse;
- 当需要换行时候:flex-wrap:wrap|wrap-reverse;
- justify-content属性定义了项目在主轴**(水平轴)**上的对齐方式
justify-content:flex-start|flex-end|center|space-between|space-around - align-items属性定义项目在交叉轴**(竖直轴)**上如何对齐。
align-items:flex-start|flex-end|center|baseline|stretch(默认值)如果项目未设置高度或设为auto,将占满整个容器的高度。) - align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。与5相同
- 以下是设置items,当同时作为子项目的容器时,以上container属性也一样使用
- order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。order:1;(用得少)
- flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-grow:1
- flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。(重要用途是)当需要不缩小比例,换行展示的情况flex-shrink:0;配合属性flex-wrap:wrap;就行
- flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
- align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。参考详细flex教程