1.Flex学习
1.微信布局传统
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信布局传统title>
<style>
*{
margin: 0;
padding: 0;
}
main{
height: 100vh;
background: #ddd;
}
footer{
position: fixed;
width: 100vw;
bottom: 0;
height: 140px;
background:linear-gradient(to bottom,
#f3f3f3,#ddd,#f3f3f3);
border-top: solid 1px #ddd;
}
footer div{
line-height: 140px;
float: left;
width: 33%;
height: 100%;
text-align: center;
color: #555;
font-size: 40px;
}
footer div:nth-child(n+2){
border-left: solid 1px #ccc;
}
style>
<body>
<main>
<footer>
<div>消息div>
<div>发现div>
<div>我div>
footer>
main>
body>
html>
2.微信布置flex
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信布置flextitle>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-direction: column;
}
main{
background: #ddd;
flex:1;
}
footer{
background:linear-gradient(to bottom,
#f3f3f3,#ddd,#f3f3f3);
height: 140px;
display: flex;
justify-content: space-evenly;
}
footer div{
flex:1;
text-align: center;
font-size: 40px;
line-height: 140px;
color: #555;
}
footer div:nth-child(n+2){
border-left: solid 1px #ccc;
}
style>
head>
<body>
<main>111main>
<footer>
<div>消息div>
<div>通讯录div>
<div>发现div>
<div>我div>
footer>
body>
html>
3.声明弹性盒子的几种方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
padding: 0;
margin: 0;
}
footer{
display: flex;
background: black;
}
style>
head>
<body>
<footer>
<div>simondiv>
<div>simondiv>
<div>simondiv>
footer>
body>
html>
4.改变主轴线方向
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
padding: 0;
margin: 0;
}
article{
border: solid 5px blueviolet;
width: 400px;
display: flex;
flex-direction: column;
}
article div{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
body{
padding-left: 100px;
padding-top: 100px;
}
style>
head>
<body>
<article>
<div>div>
<div>div>
<div>div>
article>
body>
html>
5.控制弹性元素溢出换行处理
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
padding: 0;
margin: 0;
}
article{
border: solid 5px blueviolet;
width: 400px;
display: flex;
flex-direction: column;
}
article div{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
body{
padding-left: 100px;
padding-top: 100px;
}
style>
head>
<body>
<article>
<div>div>
<div>div>
<div>div>
article>
body>
html>
6.主轴与交叉轴及其排列方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
padding: 0;
margin: 0;
}
article{
border: solid 5px silver ;
width: 550px;
height: 280px;
display: flex;
flex-flow: wrap row;
justify-content: center;
align-items: center;
}
article div{
width: 100px;
height: 100px;
background: blueviolet;
padding: 10px;
box-sizing: border-box;
color: white;
}
body{
padding-left: 100px;
padding-top: 100px;
}
style>
head>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
7.多行主轴和交叉轴及其排列方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
padding: 0;
margin: 0;
}
article{
border: solid 5px silver ;
width: 550px;
height: 280px;
display: flex;
flex-flow: wrap row;
justify-content: center;
align-items: center;
}
article div{
width: 100px;
height: 100px;
background: blueviolet;
padding: 10px;
box-sizing: border-box;
color: white;
}
body{
padding-left: 100px;
padding-top: 100px;
}
style>
head>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
8.元素可用容器分配
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding-left: 50px;
padding-top: 15px;
}
article{
border: #555555 solid 5px;
width: 550px;
height: 100px;
display: flex;
flex-flow: wrap row;
}
article div:nth-child(1){
flex-grow: 0;
}
article div:nth-child(2){
flex-grow: 1;
}
article div:nth-child(3){
flex-grow: 3;
}
article div{
flex-grow: 1;
width: 100px;
height: 100px;
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
box-sizing: border-box;
font-size: 35px;
color: white;
}
style>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
9.小米结构demo
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0;
padding: 0;
}
header{
height: 60px;
background: blueviolet;
}
main{
flex-grow: 1;
background: #ccc;
}
footer{
height: 60px;
background: #383881;
}
body{
height: 100vh;
display: flex;
flex-flow: column;
justify-content: space-between;
}
style>
head>
<body>
<header>
header>
<main>
main>
<footer>
footer>
body>
html>
10.元素动态缩小技巧
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding-left: 50px;
padding-top: 15px;
}
article{
border: #555555 solid 5px;
width: 400px;
height: 100px;
display: flex;
flex-flow: row;
}
article div:nth-child(1){
flex-shrink: 0;
}
article div:nth-child(2){
flex-shrink: 1;
}
article div:nth-child(3){
flex-shrink: 3;
}
article div{
width: 200px;
height: 100px;
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
box-sizing: border-box;
font-size: 35px;
color: white;
}
style>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
11.主轴基本尺寸
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding-left: 50px;
padding-top: 15px;
}
article{
border: #555555 solid 5px;
width: 550px;
height: 100px;
display: flex;
flex-flow: wrap row;
}
article div{
flex-basis: 100px;
height: 100px;
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
box-sizing: border-box;
font-size: 35px;
color: white;
}
style>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
12.弹性元素的组合定义
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding-left: 50px;
padding-top: 15px;
}
article{
border: #555555 solid 5px;
width: 400px;
height: 100px;
display: flex;
flex-flow: row;
}
article div{
flex:0 0 200px;
height: 100px;
background-color: blueviolet;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
box-sizing: border-box;
font-size: 35px;
color: white;
}
article div:nth-child(1){
flex: 1 1 200px;
}
article div:nth-child(2){
flex: 1 3 200px;
}
article div:nth-child(3){
flex: 0 0 200px;
}
style>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
13.改变元素的顺序
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
*{
padding-left: 50px;
padding-top: 15px;
}
article{
border: solid 5px silver;
width: 400px;
height: 500px;
padding: 10px;
display: flex;
flex-flow: column;
justify-content: space-between;
}
article div{
background: blueviolet;
background-clip: content-box;
padding: 10px;
flex: 1;
font-size: 55px;
color: white;
}
article :nth-child(1){
order: 1;
}
article :nth-child(2){
order: -1;
}
article :nth-child(3){
order: -11;
}
style>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
14.改变元素顺序的实例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
*{
margin: 0;
padding: 0;
}
article{
flex: 1;
border: solid 5px silver;
width: 400px;
height: 500px;
padding: 10px;
display: flex;
flex-direction: column;
}
article section{
flex: 1 0 100px;
background: blueviolet;
background-clip: content-box;
padding: 10px;
text-align: center;
display: flex;
flex-direction: column;
}
article section span{
padding: 10px;
background: black;
cursor: pointer;
color: #fff;
}
article section div{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 35px;
}
style>
<body>
<article>
<section>
<div>simon1.comdiv>
<span onclick="up(this)">upspan>
section>
<section>
<div>simon2.comdiv>
<span onclick="up(this)">upspan>
section>
<section>
<div>simon3.comdiv>
<span onclick="up(this)">upspan>
section>
article>
<script>
function up(el){
let order = getComputedStyle(el.parentElement,null).order
el.parentElement.style.order = order * 1- 1;
}
script>
body>
html>
15.弹性布局操作文本结点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
article{
border: solid 5px silver;
width: 400px;
height: 500px;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
style>
<body>
<article>
simonup
<div>
simonmid
div>
simondown
article>
body>
html>
16.定位元素在弹性布局中的表现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style>
*{
margin: 0;
padding: 0;
}
article{
border: solid 5px silver;
width: 400px;
height: 500px;
padding: 10px;
display: flex;
flex-flow: column;
justify-content: space-between;
position: relative;
}
article *{
flex: 1;
background: blueviolet;
background-clip: content-box;
padding: 10px;
font-size: 35px;
color: white;
}
article :nth-child(1){
position: relative;
background-color: black;
left: 100px;
top: 200px;
}
style>
<body>
<article>
<div>1div>
<div>2div>
<div>3div>
article>
body>
html>
17.微信弹出界面demo
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-flow: column;
}
main{
flex: 1;
background: #f3f3f3;
}
footer{
height: 50px;
background: #eee;
display: flex;
justify-content: space-between;
flex-flow: row;
border-top: solid 1px #ccc;
}
footer section{
flex: 1;
border-right: solid 1px #ccc;
display: flex;
flex-flow:column-reverse;
}
footer section:last-child{
border-right: none;
}
footer section h4{
flex: 0 0 50px;
display: flex;
flex-flow: column;
justify-content: center;
text-align: center;
cursor: pointer;
}
footer section ul{
display: flex;
flex-flow: column;
border:solid 1px #ccc;
margin: 5px;
border-radius: 10px;
text-align: center;
}
footer section ul li{
flex: 1 0 50px;
display: flex;
flex-flow: column;
justify-content: center;
border-bottom: solid 1px #ccc;
cursor: pointer;
}
footer section ul li:last-child{
border-bottom: none;
}
style>
head>
<body>
<main>
main>
<footer>
<section>
<h4>教程h4>
<ul>
<li>
PHP
li>
<li>
CSS
li>
ul>
section>
<section>
<h4>直播h4>
section>
<section>
<h4>软件h4>
section>
footer>
body>
html>
18.margin自动撑满小技巧
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0;
padding: 0;
}
nav{
margin: 0 auto;
width: 1000px;
height: 60px;
background: #f3f3f3;
box-shadow: 0 0 0 rgba(0,0,0,.3);
display: flex;
justify-content: space-between;
}
ul{
list-style: none;
display: flex;
align-items: center;
}
ul:first-child{
display: flex;
}
ul:first-child > li{
margin: 0 10px;
}
ul:nth-child(2) > li{
margin: 0 10px;
width: 50px;
height: 50px;
background: #9b59b6;
border-radius: 50%;
}
style>
head>
<body>
<nav>
<ul>
<li>首页li>
<li>视频教程li>
<li>晚八点直播li>
ul>
<ul>
<li>li>
<li>li>
<li>li>
ul>
nav>
body>
html>
