旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

flex规划基础语法的细致引见【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:73


导读:本篇文章给人人带来的内容是关于flex规划基础语法的细致引见,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。2009年,W3C提出了一种新的计划—-Flex...
本篇文章给人人带来的内容是关于flex规划基础语法的细致引见,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

2009年,W3C提出了一种新的计划—-Flex规划,能够轻便、完全、相应式地完成种种页面规划。如今,它已得到了一切浏览器的支撑,这意味着,如今就可以很安全地运用这项功用

1.什么是flex规划?

Flex是Flexible Box的缩写,意为”弹性规划”,用来为盒状模子供应最大的灵活性.

flex规划 : .box{display:flex;}

行内元素也能够运用flex规划 : .box{display:inline-flex;}

Webkit内核的浏览器,必需加上-webkit前缀 : .box{display:-webkit-flex; display:flex;}

注重,设为Flex规划今后,子元素的float、clear和vertical-align属性将失效。

2.基础概念

Flex容器(flex container) : 采纳Flex规划的元素,称为flex容器.

Flex项目(flex item) : flex容器的一切子元素,自动成为容器成员,即flex项目.

容器的两根轴线 : 程度的主轴(main axis), 垂直的交织轴(cross axis).

主轴(main axis) : 最先位置->main start, 完毕位置->main end, 项目默许沿主轴分列.

交织轴(cross axis) : 最先位置->cross start, 完毕位置->cross end

容器内的单个项目占有的主轴空间叫做->main size, 交织轴空间叫做->cross size

3.FLex属性

flex属性分为容器属性项目属性.

容器属性 : flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

项目属性 : order, flex-grow, flex-shrink, flex-basis, flex, align-self

3.1容器属性

flex-direction : 决议主轴的方向(即项目分列方向)

  row : 程度方向,从左到右.(默许属性)

  row-reverse : 程度方向,从右到左.

  column : 垂直方向,从上到下.

  column-reverse : 垂直方向,从下到上.

flex-wrap : 划定一条轴线排不下,怎样换行.

  nowrap : 不换行(默许属性)

  wrap : 换行,第一行在上边

  wrap-reverse : 换行,第一行在下边,(只行数分列相反,单行内照旧从左到右分列,每一行都是).

flex-flow : 连系flex-direction和flex-wrap,写法以下 

  .box{flex-flow:column wrap-reverse}

justify-content : 定义项目在主轴上的对齐体式格局

  flex-start : 左对齐(默许值),项目以主轴的出发点对齐

  flex-end : 右对齐,项目以主轴的尽头

  center : 居中

  space-between : 两头对齐,项目之间距离相称

  space-around : 每一个项目两侧的距离相称。所以,项目之间的距离比项目与边框的距离大一倍

align-items : 定义项目在交织轴的对齐体式格局(仅单行,多行对齐由align-content定义)

  stretch : 假如项目未设置高度或设为auto,将占满全部容器的高度(默许值)

  flex-start : 从上到下,以交织轴的出发点为基线,向尽头延长

  flex-end : 从下到上,以交织轴的尽头为基线,向出发点延长

  center : 交织轴的中点对齐,项目的中点放在交织轴的中点上

  baseline : 以一行中每一个项目的第一行笔墨举行对齐.

align-content : 定义了容器内有多行项目时沿交织轴的对齐体式格局, 假如项目只要一根轴线,该属性不起作用

  stretch : 轴线占满全部交织轴(每行都有一条轴线), 默许属性

  flex-start : 以交织轴的出发点对齐

  flex-end : 以交织轴的尽头对齐

  center : 以交织轴的中点对齐

  space-between : 多行项目在交织轴上距离均匀散布

  space-around : 多行项目在交织轴上两侧的距离都相称。所以,项目在交织轴上的距离比项目与边框的距离大一倍

  注 : justify-content, align-items和align-content是容器的属性,而不是项目的属性,是设定一个容器内项目以轴线上的某一位置对齐

3.2项目属性

order : 定义项目的分列递次,数值越小,分列越靠前.默许值为0,写法以下

  .item{order:5}

flex-grow : 定义属性项目放大比例,默许为1

  假如一切项目的flex-grow属性都为1,则它们将平分盈余空间(假如有的话)。假如一个项目的flex-grow属性为2,其他项目都为1,则前者占有的盈余空间将比其他项多一倍

flex-shrink : 定义项目减少比例,默许为1

  假如一切项目的flex-shrink属性都为1,当空间不足时,都将等比例减少。假如一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不减少.负值对该属性无效

flex-basis : 定义了在分派过剩空间之前,项目占有的主轴空间(main size),浏览器依据这个属性,盘算主轴是不是有过剩空间。它的默许值为auto,即项目的原本大小

  它能够设为跟width或height属性一样的值(比方350px),则项目将占有牢固空间

flex : 连系flex-grow, flex-shrink 和 flex-basis的属性, 默许值为0 1 auto, 引荐优先运用

  该属性有两个快速值:auto (1 1 auto) 和 none (0 0 auto

align-self : 许可单个项目有与其他项目不一样的对齐体式格局,可掩盖align-items属性, 默许值为auto,示意继续父元素的align-items属性,假如没有父元素,则等同于stretch

  该属性可能取6个值,除了auto,其他都与align-items属性完全一致

【相干引荐:CSS视频教程】

以上就是flex规划基础语法的细致引见的细致内容,更多请关注ki4网别的相干文章!

标签:flex布局