Blogger Information
Blog 32
fans 1
comment 0
visits 23226
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性布局之弹性元素-PHP培训第九期线上班
淡月
Original
423 people have browsed it

.设置弹性元素的增长因子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置弹性元素的增长因子</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
<h1>设置弹性元素的增长因子</h1>
<h3>1.所用弹性元素不增长,以原始宽度显示,增长因子为0默认</h3>
<div class="container flex demo1">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>2.将全部剩余空间分配给指定元素,例如第三个</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>3.将全部剩余空间按增长因子在不同弹性元素间分配</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>4.将全部剩余空间按增长因子在不同弹性元素间分配</h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>5.每个元素宽度不同时,同样适用以上分配规律</h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>
59$EZ32PD$AGZU2RIL8P{30.png
@import "public.css";


.container{
    width: 550px;

}

.item{
    width: 100px;

}

.demo1 > .item{
    flex-grow: 0;
}

.demo2 > .item:first-of-type{
    flex-grow: 0;
}

.demo2 > .item:nth-of-type(2){
    flex-grow: 0;
}

.demo2 > .item:last-of-type{
    flex-grow: 1;
}


/*****************/


.demo3 > .item:first-of-type{
    flex-grow: 1;
}

.demo3> .item:nth-of-type(2){
    flex-grow: 1;
}

.demo3 > .item:last-of-type{
    flex-grow: 3;
}

.demo4 > .item:first-of-type{
    flex-grow: 0.5;
}

.demo4> .item:nth-of-type(2){
    flex-grow: 0.5;
}

.demo4 > .item:last-of-type{
    flex-grow: 1.5;
}

.demo5 > .item:first-of-type{
    width: 120px;
    flex-grow: 2;

}

.demo5 > .item:nth-of-type(2){
    width: 150px;
    flex-grow: 2;

}
.demo5 > .item:last-of-type{
    width: 180px;
    flex-grow: 6;

}

二.设置弹性元素的缩减因子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置弹性元素的缩减因子</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
<h1>设置弹性元素的缩减因子</h1>
<h3>1.所用弹性元素不增长,以原始宽度显示,</h3>
<div class="container flex demo1">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>2.所有弹性元素自适应容器宽度且不换行,缩减因子:1 默认</h3>
<div class="container flex demo2">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>3.当三个弹性元素的缩减因子不相等时</h3>
<div class="container flex demo3">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>4.缩减因子也可以是小数,只要大于0就可以</h3>
<div class="container flex demo4">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
</div>
<h3>5.每个元素宽度不同时,</h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>
TX]~C7T0Q`JA9OB9Y%YOK$W.png
@import "public.css";


.container{
    width: 550px;

}

.item{
width: 250px;

}

.demo1 > .item{
    flex-shrink: 0;
}

.demo2 > .item{
    flex-shrink: 1;
}

.demo3 > .item:first-of-type{
    flex-shrink: 1;
}

.demo3 > .item:nth-of-type(2){
    flex-shrink: 2;
}

.demo3 > .item:last-of-type{
    flex-shrink: 3;
}

.demo4 > .item:first-of-type{
    flex-shrink: 0.2;
}

.demo4 > .item:nth-of-type(2){
    flex-shrink: 0.3;
}

.demo4 > .item:last-of-type{
    flex-shrink: 0.5;
}


.demo5 > .item:first-of-type{
    width: 220px;
    flex-shrink: 2;
}

.demo5 > .item:nth-of-type(2){
    width: 250px;
    flex-shrink: 2;
}

.demo5 > .item:last-of-type{
    width: 280px;
    flex-shrink: 6;
}


三.设置弹性元素的基准尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置弹性元素的基准尺寸</title>
    <link rel="stylesheet" href="3.css">
</head>
<body>
<h1>flex-basis:设置弹性元素的基准尺寸</h1>
<h3>1:在设置弹性元素宽度时,一内容宽度显示</h3>
<div class="container flex demo1">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>2.存在自定义元素宽度时,则以该宽度显示</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>3.自动状态下, 由浏览器根据预设值自行判定</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>4.当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>5.元素基准宽度支持百分比设置 </h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>
T{PUY_WQQP~6TNZ866JC[AE.png
@import "public.css";

.container{
    width: 550px;
}

.demo1 > .item{
    flex-basis: content;
}

.demo2 > .item {
    width: 100px;
}

.demo3 > .item {
    flex-basis: auto;
}

.demo4 > .item {
    width: 100px;
    flex-basis: 150px;
}

.demo5 > :first-child {
    flex-basis: 20%;
}

.demo5 > :nth-child(2) {
    flex-basis: 30%;
}

.demo5 > :last-child {
    flex-basis: 50%;
}


四.简化弹性元素的基本设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简化弹性元素的基本设置</title>
    <link rel="stylesheet" href="4.css">
</head>
<body>
<h1>flex:简化弹性元素的基本设置</h1>
<h3>1.根据宽度计算,允许缩减适应容器</h3>
<div class="container flex demo1">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>2.根据宽度计算,元素完全弹性以适应容器</h3>
<div class="container flex demo2">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>3.元素完全失去弹性,以原石大小呈现</h3>
<div class="container flex demo3">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>4.一个数值表示增长因子,flex:1</h3>
<div class="container flex demo4">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>5.三个数值时,以它为计算标准</h3>
<div class="container flex demo5">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<h3>6.单独设置第一个元素弹性大小</h3>
<div class="container flex demo6">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>
4FIGJB7Z[U}ZFHE5WWFAU[V.png
@import "public.css";

.container{
    width: 550px;
}

.demo1 > .item{
    width: 100px;
    height: 60px;
    flex: initial;
}

.demo2 > .item{
    width: 100px;
    height: 60px;
    flex: auto;
}

.demo3 > .item{
    width: 100px;
    height: 60px;
    flex: none;
}

.demo4 > .item{
    width: 100px;
    height: 60px;
    flex: 1;
}
.demo5 > .item{
    width: 100px;
    height: 60px;
    flex: 1 0 200px;

}

.demo6 > .item{
    width: 100px;
    height: 60px;
}

.demo6 > .item:first-of-type{
    flex: 1 1 10%;
}


五.align-self的用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>align-self的用法</title>
    <link rel="stylesheet" href="5.css"/>
</head>
<body>
<div class="container flex ">
    <span class="item">flex-start</span>
    <span class="item">flex-end</span>
    <span class="item">center</span>
    <span class="item">baseline</span>
    <span class="item">stretch</span>
</div>
</body>
</html>
1(9{QUVN6DGS7{03BB46FEL.png
.container{
    border:2px dashed blue;
    margin:50px;
    background-color:#cdc;
    height:300px;
    width:565px;

    display:flex;
    -webkit-flex-flow:row wrap;
    -webkit-align-items:flex-start;
    align-items:flex-start;
}
.item{
    width:100px;
    min-height:100px;
    border:1px solid green;
    margin:5px;
    font-size:20px;
    text-align:center;
    line-height:100px;
    color:#fff;
    font-weight:bold;
}
.item:nth-child(1){
    background-color:lightblue;
    align-self:flex-start;
}
.item:nth-child(2){
    background-color:black;
    align-self:flex-end;
}
.item:nth-child(3){
    background-color:coral;
    align-self:center;
}
.item:nth-child(4){
    background-color:yellow;
    align-self:baseline;
}
.item:nth-child(5){
    background-color:lightpink;
    align-self:stretch;
}

BDDF69F85B89B2EEED87A4EF39D8EB1C.jpg


六.用flex实现圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用flex实现圣杯布局</title>
    <link rel="stylesheet" href="6.css">
</head>
<body>
<header>头部</header>
<div class="main">
    <div class="content">内容</div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>
<footer>底部</footer>
</body>
</html>
{Y3W8D01H$4JY%I$SDQX3B9.png
body{
    display:flex;
    flex-direction:column;
}

header,footer{
    flex:0 0 50px;
    background:lightgreen;
}

.main{
    display:flex;
    flex:1;
}

.content{
    background:lightblue;
    height:500px;
    flex:1;
}
.left,.right{
    height:500px;
    background:lightpink;
    flex:0 0 100px;
}

.left{
    order:-1;
}


EC583E991ACCB20CBE4BC0B9F8E7B820.jpg


七. flex属性的用法

①项目属性

1    order    定义项目排列顺序,索引越小超靠前,默认为0    

2    flex-grow    定义项目的放大比例,默认为0表示不放大, 即就算存在剩余空间也不放大    

3    flex-shrink    定义了项目的缩小比例,默认为1,即如何空间不足,则自动缩小项目来填充    

4    flex-basis    定义了项目占据的主轴空间,默认值为auto, 即项目原始大小    

5    flex    是flex-grow,flex-shrink,flex-basis简写,默认值: 0 1 auto, 后二个属性可选    

6    align-self    个性化定定制某单个项目的对齐方式,可覆盖容器align-items属性,默认auto

41A663133B06A6B34A34CC131D504872.jpg    

②容器属性

  1    flex-direction        主轴方向(即项目排列方向)                         
  2    flex-wrap               当多个项目在一行排列不下时,如何换行              
  3    flex-flow                flex-direction,flex-wrap的简写,默认:`row nowrap` 
  4    justify-content      项目在主轴上对齐方式                             
  5    align-items            项目在交叉轴上的对齐方式                         
  6    align-content        项目在多根轴线上的对齐方式,只有一根轴线无效

784C19964E6F8F12771CB8E40AF28051.jpg




Correction status:qualified

Teacher's comments:写得不错, 坚持
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post