CSS FlexBox 教程学习笔记

  • A+
所属分类:Web前端
摘要

这些是我在MDN教程上的学习笔记,教程地址 :https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

这些是我在MDN教程上的学习笔记,教程地址 :https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

注:不能作为教程看,只能作为温习笔记看,要看教程请去上面链接或者其他教程资源。

 

flexbox是线性排布的,不是横就是竖(宽度不够会换行)。

在要flexbox的div容器上写display:flex,这样子元素就变成flex元素了,默认水平排布(有一些文字竖着读的国家,排布方式就是垂直)。

display:inline-flex就会让容器像inline的特性一样,但是其内部内容还是flex的。

 

下图是flex容器的布局方式(默认是水平排布,也就是main axis的方向):

CSS FlexBox 教程学习笔记

 

以下css属性是在flex容器上设置的:

flex-direction属性可以设置为columnrow(默认),row-reversecolumn-reverse

flex-wrap属性可以设置为wrapno-wrap(默认),当flex容器内元素太多超出宽度的时候,wrap的话就会换行,no-wrap则会溢出。

flex: 200px可以设置flex元素的最小宽度为200px,容器不够大时,看flex-wrap属性选择换行或者溢出;换行后,新行如果有多余空间,新行的元素会使用掉。

flex-flow:row wrap 可以快捷设置flex-direction和flex-wrap。

对齐设置

align-items属性(flex容器上设置)可以设置的值为:

  stretch  (默认,cross-axis方向拉伸整个高度),

  center  (cross-axis方向的中间,就是高度中间),

  flex-start (cross-axis方向的开始,就是顶边),

  flex-end  (cross-axis方向的结束,就是底边)。

单独为某个flex元素设置不同的cross-axis方向的对齐方式,使用align-self,取值和align-items一样。

 justify-content属性(flex容器上设置)设置main-axis方向也就是水平的对齐方式,值为:

  flex-start(默认,靠左边)

  flex-end(靠右边)

  center(靠中间)

  space-around(均匀分布并且相邻和左边边都有空白隔开)

  space-between(均匀分布,仅相邻之间元素有空白隔开)

  space-evenly(均匀分布,相邻之间的空白宽度和左右两边的空白宽度都一样大)。

 

以下css属性是在flex元素上设置的:

在flex元素上设置flex:1;属性,可以使其宽度在整个容器内占比为1。

order属性可以设置元素排列顺序,值越大排越后边,默认为0,可以是负值。

justify-selfalign-self可以单独为这个元素设置main-axis和corss-axis的对齐方式,取值和align-items和justify-content一样。