主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
css3中flex简单入门
2020-07-30
网页编程网
网页编程网
<style> .box{ display: flex;/*1.开启flex*/ flex-wrap: wrap;/*2.元素超出换行*/ width: 500px; height: 500px; border:1px solid red; /*flex-direction: column;其内div主轴方向上下*/ /*flex-direction: column-reverse;其内div主轴方向上下，但从下开始排*/ justify-content: flex-start;2.水平轴对齐方式，子元素排列方式*/ /*justify-content: space-between;子元素分散排列*/ /*justify-content: space-around;3.子元素分散排列，但不靠边*/ align-items: flex-start;/*4.垂直轴对齐方式*/ /*align-content: stretch;垂直轴对齐方式*/ } .left, .mid, .right{ width: 100px; height: 100px; font-size: 30px; color: black; } .green{ background-color: green; } .pink{ /*order:2;优先级，数越小，越靠前*/ /*flex-shrink:2;缩小比例显示*/ flex-grow: 2;/*放大比例显示，会撑开至父级，图片会影响显示*/ background-color: pink; } .purple{ background-color: purple } </style> <div class="box"> <div class="left green">1</div> <div class="mid pink">2</div> <div class="right purple">3</div> </div>
阅读原文
阅读
2770
123
显示电脑版