简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >弹性布局之弹性元素-PHP培训第九期线上班

弹性布局之弹性元素-PHP培训第九期线上班

淡月
淡月原创
2019年11月06日 16:20:44420浏览

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

<!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




上一条：11月1号作业下一条：弹性元素常用属性 - PHP培训九期线上班11.4
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多