css层叠样式表flex弹性盒模型(下)

前言

本次主要讲的是flex弹性盒模型中项目的相关属性,容器的属性相关内容可以查看https://www.cwhello.com/6477.html

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

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

 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
取值:整数(可以取负数)

css层叠样式表flex弹性盒模型(下)

flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
取值:数值

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
css层叠样式表flex弹性盒模型(下)

如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
css层叠样式表flex弹性盒模型(下)

flex-shrink属性

取值:数值

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
css层叠样式表flex弹性盒模型(下)

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
css层叠样式表flex弹性盒模型(下)

flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

css层叠样式表flex弹性盒模型(下)

它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

css层叠样式表flex弹性盒模型(下)

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

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

取值:

  • auto 表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
  • flex-start交叉轴的起点对齐。
  • flex-end交叉轴的起点对齐。
  • center交叉轴的中点对齐
  • baselin项目的第一行文字的基线对齐。
  • stretch如果项目未设置高度或设为auto,将占满整个容器的高度。

css层叠样式表flex弹性盒模型(下)

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/6535.html

(0)
上一篇 2018年4月27日 10:51
下一篇 2018年4月28日 09:33

相关推荐

  • 第九章——CSS部分:层效果与溢出管理

    div称为层,更多的是因为它的z轴属性,可以实现层叠效果,例如: <div style=”position:absolute;z-index:1;left:50px;top:50px;background-color:red;”></div> <div style=”position:absolute;z-ind...

    2017年5月24日
    0741
  • 我的php学习第六天之css篇

    昨日回顾 CSS的介绍 CSS,Cascading Style Sheets层叠样式表。 一个网页由三个部分:结构、表现、行为,对应的标准是:XHTML、CSS、JavaScript。 这三个标准语言,是浏览器直接可以识别的,并且能直接进行解释(翻译)...

    2015年10月14日
    0680
  • 为什么要学习CSS+DIV技术?

    首先要问人为什么要学习,为什么要有一技之长?答:时代不断变化各行各业日新月异不学习就会很快落后,活到老学到老,人要有一技之长,技为安身立命之根本。 学习CSS+DIV技术,可以让你认识互联网,认识我们每天接触...

    2015年12月1日
    0530
  • css涉及的英语单词!

    Css(cascading  style sheet)  (级联样式表) a:active 单击鼠标左键 italic(倾斜) word-spacing  单词和单词之间的距离 underline下划线    Font-size文字的大小 Background-color:背景颜色 Background-attachme...

    2018年4月28日
    0750
  • 使用css的border属性实现三角形

    使用css的border属性实现三角形 1. border使用方法 2. border 三角形 2.1. 三角形原理,我们来看一个普通的底部边框 2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线 2.3. 我们在左边边添加一个...

    2018年5月7日
    01222
  • 自学也都能学会CSS,还参加DIVCSS5培训班?

    自学也都能学会CSS,为什么还参加DIVCSS5培训班? 自己通过自己努力可以学会DIV CSS布局技术,但需要不断摸索,牵扯问题特别多,干扰问题也比较多,这样会导致学习进度相当慢,进步也自然慢。 参加DIVCSS5开始的CSS...

    2015年12月1日
    0660
  • css层叠样式表flex弹性盒模型

    1. 简介 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定Flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动称为容器成...

    2018年4月27日
    01300
  • 我的php学习第五天之css篇

    昨日回顾 表单 主要功能:收集客户的信息。 表单的开发分两个部分:前台静态页面制作、后台PHP程序来处理。 <form name= “form1”action=“register.php”method=“GET” enctype=“application/x-www-form-urlencoded”...

    2015年10月14日
    0910

发表评论

您的电子邮箱地址不会被公开。