继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS:Flex布局基础入门

nickylau82
关注TA
已关注
手记 25
粉丝 105
获赞 597
前言

说到CSS,其实最头疼的就是兼容性问题,所以,要用Flex布局,首先也要先知道它的兼容性。戳这里可以看到Flex的兼容性其实并不理想,对桌面的支持很不理想,但是,对移动端的支持还是可以的,因此,现在越来越多的移动端开始使用Flex进行布局了。
本文主要记录了学习阮一峰老师关于Flex布局博客的一些心得。
原文戳这里:

Flex使用

使用display:flex即可将该容器指定为"flex"布局。
需要注意的是,容器设置为:"flex"布局后,子元素的"float","clear","vertical-align"属性将失效。

基本概念
  • 容器:设置了display:flex属性的元素,被称为容器。
  • 项目:容器内的子元素被称为项目(item)
  • 主轴:水平轴线(main axis)
  • 交叉轴:垂直的轴线(cross axis)
  • main start: 主轴的开始位置叫main start
  • main end: 主轴的结束位置叫main end
  • cross start: 交叉轴的开始位置叫做cross start
  • cross end: 交叉轴的结束位置叫cross end
  • main size: 单个项目占据的主轴空间叫做main size
  • cross size: 单个项目占据的交叉轴空间叫做cross size

图片描述

容器的属性

在容器上可以设置以下六个属性:

  • flex-direction: 主轴的方向
  • flex-wrap: 如何换行
  • flex-flow: flex-direction + flex-wrap的简写
  • justify-content: 项目在主轴上的对齐方式
  • align-items: 项目在交叉轴上的对齐方式
  • align-content: 如果有多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用
flex-direction

该属性决定了主轴的方向(即项目的排列方向)
再说直接点就是水平排列还是垂直排列。
该属性可能取4个值:

  • row (默认值): 水平从左到右排列
  • row-reverse : 水平从右到左排列
  • column : 垂直从上到下排列
  • column-reverse : 垂直从下到上排列
    如下图所示:
    分别是:column-reverse,column,row,row-reverse

图片描述

flex-wrap

该属性决定了在主轴上排列不下所有项目时,该如何换行。
该属性可能取3个值:

  • nowrap (默认值): 不换行
  • wrap : 换行,第一行在上面
  • wrap-reverse: 换行,第一行在下方
    如下图所示:
    nowrap:
    图片描述
    wrap:
    图片描述
    wrap-reverse:
    图片描述

flex示例中可以看出,nowrap时其实并不会出现滚动条,而是将所有项目等比缩放了。

flex-flow

该属性是flex-direction和flex-wrap的缩写
默认为: flex-flow: row nowrap;

justify-content

该属性定义了项目在主轴上的对齐方式。
可取以下几个值:

  • flex-start(默认值) : 左对齐
  • flex-end : 右对齐
  • center : 居中
  • space-between: 两端对齐,项目之间的间隔都相等
  • space-around: 每个项目的两侧都相等。因此,项目之间的间隔比项目与边框的间隔大一倍。

比较抽象的是最后两个的区别,可以看下图加强理解:

图片描述

align-item

该属性定义项目在交叉轴上如何对齐
可取以下几个值:

  • flex-start : 交叉轴的起点对齐
  • flex-end : 交叉轴的终点对齐
  • center : 交叉轴的中点对齐
  • baseline : 项目的第一行文字的基线对齐
  • stretch(默认值):如果项目未设置高度或者设为auto,将占满整个容器高度
align-content

该属性定义了多跟轴线的对齐方式。如果项目只有一根轴线,则该属性不起作用。
可取的值如下:

  • flex-start: 交叉轴的起点对齐
  • flex-end: 交叉轴的终点对齐
  • center: 交叉轴的中点对齐
  • space-between: 与交叉轴两端对齐,轴线之间的间隔平均分布
  • space-around: 每根轴线两侧的间隔都相等。所以轴线之间的间隔比边框的间隔大一倍
  • stretch(默认值): 轴线占满整个交叉轴

这种情况用的比较少,就不多写了

项目的属性

以下6个属性设置在项目上:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
order

该属性定义项目的排列顺序,数值越小,排序越靠前,默认为0

flex-grow

该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow均为1,那么所有的项目将均分容器的剩余空间
如果一个项目的flex-grow为2,其他为1的话,为2的这个项目分配到的剩余空间是其他项目的2倍

flex-shrink

该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小
如果所有的项目的flex-shrink均为1,那么所有项目将等比缩小
如果某一个项目的flex-shrink为0,则该项目不会被缩小
注:该属性值负数无效

flex-basis

该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小

flex

该属性是flex-grow, flex-shrink, flex-basis的简写。默认值为 0 1 auto; 意思是不放大不缩小,原始大小
建议优先写这个值。
比如一个容器里面有两个元素,一个是固定宽度300px,一个是自适应,那么用flex写法就是先将容器定义为display:flex,再将固定宽度300px的项目设置属性为flex:0 1 300px,自适应的设为flex: 1 1 auto

align-self

该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

演示:地址

打开App,阅读手记
6人推荐
发表评论
随时随地看视频慕课网APP