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

1. 简介

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性.

任何一个容器都可以指定Flex布局.

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动称为容器成员,称为Flex项目(flex item),简称”项目”.

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

注意:
box层没有设置高度,设置了display:flex,所以flex里的项目是不脱离文档流的

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

flex里的项目,总宽度如果不超过父级宽度,那么就正常横向排列

flex里的项目,总宽度如果超过父级宽度,那么加给项目的宽度就无效了,每个项目的宽度会自动均分

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

2. 基本概念

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

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

3. 容器的属性

以下6个属性设置在容器上。

 

u flex-direction

u flex-wrap

u flex-flow

u justify-content

u align-items

u align-content

3.1. flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

取值:

row(默认值):主轴为水平方向,起点在左端。

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

row-reverse:主轴为水平方向,起点在右端。

css层叠样式表flex弹性盒模型
column:主轴为垂直方向,起点在上沿。

css层叠样式表flex弹性盒模型
column-reverse:主轴为垂直方向,起点在下沿。

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

3.2. flex-wrap属性

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

取值:

nowrap(默认):不换行。

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

wrap(常用):换行,第一行在上方。

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

wrap-reverse:换行,第一行在下方。

css层叠样式表flex弹性盒模型
3.3. flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

css层叠样式表flex弹性盒模型
3.4. justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

它可取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start(默认值):左对齐

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

flex-end:右对齐

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

center: 居中

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

space-between(最常用):两端对齐,项目之间的间隔都相等。

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

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

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

3.5. align-items属性
align-items属性定义项目在交叉轴上如何对齐。

它可取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

flex-start:交叉轴的起点对齐。

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

flex-end:交叉轴的终点对齐。

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

center:交叉轴的中点对齐。

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

baseline: 项目的第一行文字的基线对齐。

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

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

先来看看没有给项目设置高度的时候,并且align-items为flex-start的时候的效果
css层叠样式表flex弹性盒模型

align-items:stretch时

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

3.6. align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

该属性可取6个值。

flex-start:与交叉轴的起点对齐。

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

flex-end:与交叉轴的终点对齐。

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

center:与交叉轴的中点对齐。

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

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

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

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

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

stretch(默认值):轴线占满整个交叉轴,前提是项目没有设置高度,否则效果跟align-content:flex-start效果一样

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

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

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

(0)
上一篇 2018年4月27日 10:17
下一篇 2018年4月27日 10:36

相关推荐

  • 使用css的border属性实现三角形

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

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

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

    2015年12月1日
    0130
  • 背景设置与盒子模型问题集锦

    宽(width)高(height)度设置: 1、 行内元素与块元素的区别 宽高度设置对于有些行内元素无效;图片、表格有效;网页中使用的图片比较多,建议控制图片宽高度,以便控制显示内容大小(图片会缩放,最好按等比例来设置...

    2017年10月25日
    0290
  • css实现多列布局的实践

    今天给大家安利的是一个多列布局的实践 :Columns ,特别简单,用到的属性是 column-count,column-width,column-gap 为什么会用到 Columns 场景是因为只想在手机上显示两栏,每一个.item都是从后台动态获取 然后遍...

    2018年2月27日
    0201
  • css涉及的英语单词!

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

    2018年4月28日
    0220
  • 为什么要学习CSS+DIV技术?

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

    2015年12月1日
    090
  • 第九章——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日
    0181
  • 我的php学习第六天之css篇

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

    2015年10月14日
    0140

发表评论

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

您看到的还是重蔚自留地。只是我们升级啦!