Flex布局项目属性

最新推荐文章于 2024-03-01 15:52:05 发布

web-Queen

最新推荐文章于 2024-03-01 15:52:05 发布

阅读量579

点赞数

文章标签： Flex布局项目属性

本文链接：https://blog.csdn.net/weixin_45626166/article/details/100708292

版权

order 属性
设置弹性容器内弹性子元素的属性:

flex-shrink语法

flex-shrink: number|initial|inherit;

例：
psA 被移除溢出量：(100*1/700)100，即约等于14px
B 被移除溢出量：(1001/700)100，即约等于14px
C 被移除溢出量：(1001/700)100，即约等于14px
D 被移除溢出量：(1002/700)100，即约等于28px
E 被移除溢出量：(1002/700)*100，即约等于28px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#content {
  display: flex;
  width: 500px;
}
 
#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}
 
.box { 
  flex-shrink: 1;
}
 
.box1 { 
  flex-shrink: 2; 
}
</style>
</head>
<body>
 
<p>div 总宽度为 500px, flex-basic 为 120px。</p>
<p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
<p>D , E 宽度与 A, B, C 不同</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>

**扩张因子flex-grow: 0（默认值） | <number>**

**flex-basis属性**

• 当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
• 当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
• 需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

flex-basis语法

flex-basis: number|auto|initial|inherit;

例
在这里插入图片描述显示效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex-grow: 0; /* Safari 6.1+ */
    -webkit-flex-shrink: 0; /* Safari 6.1+ */
    -webkit-flex-basis: 40px; /* Safari 6.1+ */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40px;
}

#main div:nth-of-type(2) {
    -webkit-flex-basis: 80px; /* Safari 6.1+ */
    flex-basis: 80px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

**flex 属性**

• 本质：
• flex-grow，flex-shrink，flex-basis的简写方式。
• 值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

flex语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

显示效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
#main
{
	width:220px;
	height:300px;
	border:1px solid black;
	display:flex;
}

#main div
{
	flex:1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
</html>

**align-self属性**

• 设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，可以对项目的对齐方式做特殊处理。
• 默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

语法

align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
</html>

显示效果
在这里插入图片描述

经典案例骰子盒模型
在这里插入图片描述

.face{
	width: 120px;height: 120px;
	background-color: rgba(0,0,0,0.7);
	border-radius: 10px;
	display: flex;
	margin-bottom: 5px;
	margin-top: 50px;
	margin-left: 5px;
}
/*点数为1的面*/
.face .dot{
	width: 40px;height: 40px;
	background-color: #fff;
	border-radius:50% ;
}
/*点数为2的面*/
.face:nth-child(2){
	justify-content: center;
}
/*点数为3的面*/
.face:nth-child(3){
	justify-content: flex-end;
}
/*点数为4的面*/
.face:nth-child(4){
	justify-content: space-between;
}
/*点数为5的面*/
.face:nth-child(5){
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
/*点数为6的面*/
.face:nth-child(6){
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.face:nth-child(6) .row{
	flex-basis:90%;
    display: flex;
}
.face:nth-child(6) .row:nth-child(2){
	justify-content: center;
}
.face:nth-child(6) .row:nth-child(3){
	justify-content: flex-end;
}
/*点数为7的面*/
.face:nth-child(7){
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.face:nth-child(7) .row{
	flex-basis: 90%;
	display: flex;
}
.face:nth-child(7) .row:nth-child(2){
	justify-content: center;
}
.face:nth-child(7) .row:nth-child(1){
	justify-content: space-between;
}
.face:nth-child(7) .row:nth-child(3){
	justify-content: space-between;
}
/*点数为8的面*/
.face:nth-child(8){
	align-items: center;
}
/*点数为9的面*/
.face:nth-child(9){
      justify-content: center; 
      align-items: center;
}
/*点数为10的面*/
.face:nth-child(10){
      justify-content: flex-end; 
      align-items: center;
}
/*点数为11的面*/
.face:nth-child(11){
      flex-direction: column;
      justify-content: space-between;
}
/*点数为12的面*/
.face:nth-child(12){
	align-items: flex-end;
	justify-content: space-between;
}
/*点数为13的面*/
.face:nth-child(13){
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.face:nth-child(13) .row{
	flex-basis: 90%;
	display: flex;
}
.face:nth-child(13) .row:nth-child(1){
	justify-content: space-between;
}
.face:nth-child(13) .row:nth-child(2){
	align-items: flex-end;
	justify-content: space-between;
}
/*点数为14的面*/
.face:nth-child(14){
	flex-wrap: wrap;
	justify-content: center;
	align-content: space-around;
}
.face:nth-child(14) .row{
	display: flex;
	flex-basis: 90%;
	justify-content: space-between;
}
/*点数为15的面*/
.face:nth-child(15){
	align-items: flex-end;
}
/*点数为16的面*/
.face:nth-child(16){
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
/*点数为17的面*/
.face:nth-child(17){
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}
/*点数为18的面*/
.face:nth-child(18){
	display: flex;
	flex-wrap: wrap;
}
.face:nth-child(18) .row{
	flex-basis: 90%;
	display: flex;
}
.face:nth-child(18) .row:nth-child(2){
	justify-content: center;
	margin-top: -30px;
	margin-left: 20px;
}

/*点数为19的面*/
.face:nth-child(19){
	display: flex;
	flex-wrap: wrap;
}
.face:nth-child(19) .row{
	flex-basis: 100%;
	display: flex;
}
.face:nth-child(19) .row:nth-child(2){
	 justify-content: flex-end;
	 align-content: center;
	 margin-top: -30px;
}
/*点数为20的面*/
.face:nth-child(20){
	display: flex;
	flex-wrap: wrap;
}
.face:nth-child(20) .row{
	flex-basis: 100%;
	display: flex;
}
.face:nth-child(20) .row:nth-child(2){
	 flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}
/*点数为21的面*/
.face:nth-child(21){
	display: flex;
	flex-wrap: wrap;
}
.face:nth-child(21) .row{
	flex-basis: 100%;
	display: flex;
}
.face:nth-child(21) .row:nth-child(1){
	justify-content: space-between;
}
.face:nth-child(21) .row:nth-child(2){
	justify-content:center;
}

BFC

BFC布局规则

• Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（译为：格式化上下文）（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。接下来看看有哪些盒子
• ①block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
• ②inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
• BFC布局规则
• （1）内部的Box会在垂直方向，一个接一个地放置。
• （2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• （3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• （4）BFC的区域不会与float box重叠。
• （5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• （6）计算BFC的高度时，浮动元素也参与计算（清除浮动）
• ul–li–float------父级–高度塌陷----overflow:hidden----触发BFC属性—计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC?

• （1）根元素
• （2）float属性不为none
• （3）position为absolute或fixed
• （4）display为inline-block, table-cell, table-caption, flex, inline-flex
• （5）overflow不为visible，
• overflow:hidden—触发BFC属性—BFC的区域不会与float box重叠

BFC的应用-浮动覆盖问题

在这里插入图片描述

<!-- 浮动覆盖问题 -->
<view class="fd1"></view>
<view class="fd2"></view>

.fd1{
  width: 100rpx;
  height: 150rpx;
  background:plum;
  float:left;
}
.fd2{
  width: 300rpx;
  height: 200rpx;
  background: paleturquoise;
  /* 解决方法 */
  overflow: hidden;
}

BFC的应用-清除浮动影响

在这里插入图片描述

<div class="qc">
  <div></div>
  <div></div>
</div>

.qc{
  margin-top: 50rpx;
  border:1px solid #000;
  width: 300rpx;
  /* 解决方法 */
  overflow: hidden;
}
.qc div{
    border:1px solid paleturquoise;
    width: 100rpx;
    height: 100rpx;
    float:left;
  }

BFC的应用-防止边距重叠

<div class="box1"></div>
<div class="box2"></div>

.box1{
    width: 100rpx;
    height: 100rpx;
    background: plum;
    margin-bottom: 10px;
  }
.box2{
  width: 200rpx;
  height: 200rpx;
  background: purple;
  margin-top: 30px;
}

BFC的应用-防止边距重叠

<div style="overflow:hidden;">
  <div class="box1"></div>
</div>
<div class="box2"></div>

.box1{
    width: 100rpx;
    height: 100rpx;
    background: plum;
    margin-bottom: 10px;
  }
.box2{
  width: 200rpx;
  height: 200rpx;
  background: purple;
  margin-top: 30px;
}

web-Queen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局项目属性

项目属性ps：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。语法ps：order | flex-grow |flex-shrink | flex-basis | flex | align-self项目属性：• ①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>• ②项目的收缩因子flex-shrink: 1（默...
复制链接

扫一扫