flex布局

来源:http://www.chinese-glasses.com 作者:Web前端 人气:118 发布时间:2020-04-22
摘要:一:有六个属性设置在box父容器上,来控制子元素的显示方式;分别是:flex-direction设置主轴对齐方式 默认 row x轴从左到右;flex-wrap 子元素换行的方式默认nowrap ;flex-flow flex-direction和

一:有六个属性设置在box父容器上,来控制子元素的显示方式;分别是:flex-direction 设置主轴对齐方式 默认 row x轴从左到右;flex-wrap 子元素换行的方式 默认nowrap ;flex-flow flex-direction和flex-wrap的简写 默认row nowrap;justify-content 子元素的对齐方式 默认flex-start 左对齐align-items align-content

图片 1

space-around:

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

2.2 wrap:换行,正常的折行


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

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6 ) align-content属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

5 align-items:交叉轴如何对齐,如果flex-direction:row和row-reverse 那么交叉轴就是y轴,如果是column和column-reverse那么交叉轴是x轴

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

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

(1)nowrap
(默认):不换行。

flex-flow:flex-direction|flex-wrap ;

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

  1. justify-content: 子元素在主轴对齐方式

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5 ) align-items属性
align-items属性定义项目在交叉轴上如何对齐。

#box{ display: flex; flex-direction: row; flex-wrap: wrap;}

一、Flex布局是什么?
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
----注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1) flex-direction属性决定主轴的方向(即项目的排列方向)。

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

Paste_Image.png

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。

图片 2

时间: 2019-09-19阅读: 225标签: 布局

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

例如上面代码,主轴就是x轴横向的;起点在左端,从左到右排列;

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

#box{ display: flex; width: 500px; height: 300px; border: 10px solid red;}

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

order:默认(0) 值越小越靠前,

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

2.3wrap-reverse 第二行在第一行上方;

图片 3

#box{ display: flex; flex-direction: row; width: 500px; border: 1px solid red;}

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

除了auto是表示继承父元素,其他的跟align-items是一样的。

图片 4

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

Paste_Image.png

  1. flex-wrap :定义子元素超过一行,如何换行,分别有三个属性:

图片 5

1、flex-direction 决定主轴的对齐方向,分别有四个属性:


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

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

本文由10bet发布于Web前端,转载请注明出处:flex布局

关键词:

最火资讯