Flex布局

最新推荐文章于 2024-05-05 09:59:46 发布

weixin_33965305

最新推荐文章于 2024-05-05 09:59:46 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cdac538518825686c249e34

Flex布局

网页布局（layout）是CSS的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 +float属性。针对于某些特殊布局就显得非常不方便，例如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有新版主流浏览器的支持，这意味着，现在就能很安全地使用这项功能。

特点

1.任何元素都可以指定为flex布局

2.设置flex布局后，子元素float、clear和vertical-align属性将失效。

flex属性

flex子元素属性

1.order

5.flex

flex-direction

决定flex布局排版方向，默认为横向排版

flex-direction: row | row-reverse | column | column-reverse;

	<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
复制代码

.flex{
  display: flex;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
复制代码

row

(默认值)横向排版，起点为左上角

.flex{
  flex-direction: row;
}
复制代码

row-reverse

横向排版，起点为右上角

.flex{
  flex-direction: row-reverse;
}
复制代码

column

竖向排版，起点为左上角

.flex{
  flex-direction: column;
}
复制代码

column-reverse

竖向排版，起点为左下角

.flex{
  flex-direction: column-reverse;
}
复制代码

flex-wrap

决定flex超出主方向布局位置时是否换行，以及换行方式

flex: nowrap | wrap | wrap-reverse

	<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
复制代码

.flex{
  display: flex;
  width: 360px;
  height: 360px;
  flex-direction: row;
  justify-content: space-between;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
复制代码

nowrap

默认值，不换行

.flex{
  flex-wrap: nowrap;
}
复制代码

wrap

换行，常规排版

.flex{
  flex-wrap: wrap;
}
复制代码

wrap-reverse

反向换行，从最下方往上方排版

.flex{
  flex-wrap: wrap-reverse;
}
复制代码

flex-flow

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

flex-flow: <flex-direction> <flex-wrap>
复制代码

justify-content

决定flex布局在主轴方向上的排版方法

justify-content: flex-start | flex-end | center | space-around | space-between

	<div class="flex">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>
复制代码

.flex{
  display: flex;
  border:1px solid blue;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  flex-direction: row;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  border: 1px solid red;
}
复制代码

flex-start

默认值，沿主轴方向依次排列，无特殊样式(左对齐)

.flex{
  justify-content: flex-start;
}
复制代码

flex-end

沿主轴方向反向依次排列，无特殊样式(右对齐)

.flex{
  justify-content: flex-end;
}
复制代码

center

主轴方向居中排列，无特殊样式(居中)

.flex{
  justify-content: center;
}
复制代码

space-around

主轴方向依次排列，子元素与子元素见自动生成等宽间隔，子元素与子元素的间隔子元素与父元素边框之间的间隔的两倍

.flex{
  justify-content: space-around;
}
复制代码

space-between

主轴方向依次排列，两端无间隔，子元素与子元素见自动生成等宽间隔

.flex{
  justify-content: space-between;
}
复制代码

align-items

align-items: flex-start | flex-end | center | baseline | stretch

针对子元素在单一主轴上（一行上）交叉轴的排版方式

flex-start,flex-end,center规则和justify-content相同值的规则一样，将主轴替换为交叉轴即可

	<div class="flex">
		<div style="font-size:22px;">1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div style="font-size:22px;">5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div style="font-size:22px;height:auto;">9</div>
	</div>
复制代码

.flex{
  display: flex;
  border:1px solid blue;
  width: 360px;
  height: 360px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.flex>div{
  display: flex;
  box-sizing: border-box;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  font-size: 66px;
  border: 1px solid red;
}
复制代码

baseline

.flex{
  align-items: baseline;
}
复制代码

stretch

.flex{
  align-items: stretch;
}
复制代码

align-content

规则和justify-content相同值的规则一样，将主轴替换为交叉轴即可,在单一主轴（项目只有一行）上该属性无效

flex子元素属性

作用于flex项目下的直接子元素

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item{
  order: <integer>;
}
复制代码

flex-grow

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

将剩余空间等比缩放大小，分配给当前指定项目

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.item{
  flex-grow:<float>;
}
复制代码

flex-shrink

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

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

.item{
  flex-shrink:<float>;
}
复制代码

flex-basis

重定义项目大小，默认值auto，即项目本身大小

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

自我感觉该属性用处不大

flex

flex属性是flex-grow属性和flex-shrink属性和flex-basis属性的简写方式

flex: <flex-grow> <flex-shrink> <flex-basis>
复制代码

align-self

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

flex css 实例

.flex{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  position: relative;
}
.flex.row{
  flex-flow: row nowrap;
}
.flex.wrap{
  flex-wrap: wrap;
}
.flex>.auto{
  width: 100%;
  flex-grow: 1;
  position: relative;
}
.row>.auto{
  width: auto;
  height: 100%;
}
.absFull{ /*针对部分浏览器使用.auto样式导致页面样式错乱*/
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
复制代码