13-flex
01 flex2个重要的概念
02 flex布局模型
03 flex相关属性
04 flex container相关属性
4.1 flex direction
不同的值会改变主轴的方向
4.2 flex-wrap
4.3 flex-flow
function getRandomColor() {
return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}
const itemEls = document.querySelectorAll(".item")
for (const item of itemEls) {
item.style.backgroundColor = getRandomColor()
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-flow: row-reverse wrap;
width: 600px;
height: 600px;
background-color: orange;
}
.item {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<span class="item item1">1</span>
<span class="item item2">2</span>
<span class="item item3">3</span>
<span class="item item4">4</span>
</div>
<script src="./color.js"></script>
</body>
</html>
4.4 justify-content
4.5 align-item
4.6 align-content
05 flex-item的属性
5.1 order
改变flex-item的排布顺序
如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
.box .item {
width: 100px;
height: 100px;
}
.box .item1 {
background-color: aqua;
}
.box .item2 {
background-color: pink;
}
.box .item3 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
效果如下图
设置order可以改变顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
.box .item {
width: 100px;
height: 100px;
}
.box .item1 {
order: 5;
background-color: aqua;
}
.box .item2 {
order: 4;
background-color: pink;
}
.box .item3 {
order: 3;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
效果如下
5.2 align-self
5.3 flex-grow
该属性决定了flex-items如何拉伸
5.3.1 默认情况
默认值为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
.box .item {
width: 100px;
height: 100px;
}
.box .item1 {
background-color: aqua;
}
.box .item2 {
background-color: pink;
}
.box .item3 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
5.3.2 给其中1个flex-item设置
效果如下
5.3.3 所有flex-items都设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
.box .item {
flex-grow: 1;
width: 100px;
height: 100px;
}
.box .item1 {
background-color: aqua;
}
.box .item2 {
background-color: pink;
}
.box .item3 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
5.3.4 设置任意非负数
5.4 flex-shrink
该属性决定flex items如何收缩，默认是为1表示收缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
.box .item {
width: 100px;
height: 100px;
}
.box .item1 {
/* flex-shrink: 2; */
background-color: aqua;
}
.box .item2 {
background-color: pink;
}
.box .item3 {
background-color: red;
}
.box .item4 {
background-color: purple;
}
.box .item5 {
background-color: blue;
}
.box .item6 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>
设置压缩的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 400px;
height: 400px;
background-color: orange;
}
.box .item {
width: 100px;
height: 100px;
}
.box .item1 {
flex-shrink: 2;
background-color: aqua;
}
.box .item2 {
background-color: pink;
}
.box .item3 {
background-color: red;
}
.box .item4 {
background-color: purple;
}
.box .item5 {
background-color: blue;
}
.box .item6 {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>
06 缩写语法
07 flex布局解决对齐问题
第一种方法就是把距离都算出来，但是这种扩展性不强
第二种方法
color.js代码
function getRandomColor(){
return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}
const itemEls = document.querySelectorAll(".item")
for (const item of itemEls){
item.style.backgroundColor = getRandomColor()
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
/* height: 500px; */
background-color: orange;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 120px;
height: 120px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<!-- <div class="item item8">8</div> -->
</div>
<script src="./color.js"></script>
</body>
</html>
这样不用通过计算，可以让其余行的元素都是均匀排布
13-flex的更多相关文章
- 2017.11.13 flex 布局相关问题
一.今日任务:城市体验平台小程序的开发(由于数据还未完善,今天主要是 UI 布局的开发) 二.所遇问题 1. flex 布局问题: html: <view class="flex-sp ...
- 【转】【Flex】FLEX 学习网站分享
[转:http://hi.baidu.com/tanghecaiyu/item/d662fbd7f5fbe02c38f6f764 ] FLEX 学习网站分享 http://blog.minidx.co ...
- 基于restful注解(spring4.0.2整合flex+blazeds＋spring-mvc)<一>
摘自: http://www.blogjava.net/liuguly/archive/2014/03/10/410824.html 参考官网:1.http://livedocs.adobe.com/ ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- Web前端面试题整合，持续更新【可以收藏】
饭后闲来无事,把这几年带学生用的一些面试题整合一下,供上!拿走,不客气!应付一般公司的二面基本上是够用了.祝你早日拿到心仪的offer. css相关 1. 万能居中 1.margin: 0 auto; ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十三）台风模块
config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config ...
- 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（十一）路径导航模块
config.xml文件的配置如下: <widget label="路径导航" icon="assets/images/lujingdaohang.png" ...
- Eclipse开发环境设置(Maven+Spring MVC+Flex)
1. 环境设置 1.1. Java环境设置 1)JAVA_HOME D:\GreenSoftware\Java\Java8X64\jdk1.8.0_91 2)PATH ;%JAVA_HOME%/bin ...
- CM12.1/13.0编译教程
环境搭建 1.安装64位Ubuntu系统(实体安装.虚拟机安装均可) 注意:要求机器至少4G内存(虚拟机至少分配4G内存),硬盘至少100G空间(源码20G+,编译后整个目录约60~70G) 安装方法 ...
- FLEX各种特效集合
http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html经典中的经典 h ...
随机推荐
- WPF 笔迹触摸点收集工具
本文来安利大家一个工具,可以用来收集笔迹的触摸点,这个工具完全开源 在开始之前先看一下工具的界面 实现方式其实就在触摸的时候收集触摸点信息,上面的工具有很多功能都没有实现的.笔迹绘制的功能使用 WPF ...
- 安装petalinux
1.petalinux工具下载,下载地址: https://china.xilinx.com/support/download/index.html/content/xilinx/zh/downloa ...
- OpenAI未至，Open-Sora再度升级！已支持生成16秒720p视频
Open-Sora 在开源社区悄悄更新了!现在支持长达 16 秒的视频生成,分辨率最高可达 720p,并且可以处理任何宽高比的文本到图像.文本到视频.图像到视频.视频到视频和无限长视频的生成需求.我们 ...
- AI 编译器CINN中的OpLowering优化Pass
一.Lower 主逻辑 在 OpLower::Lower() 接口中,主要分为两大类: Elementwise类,主要涉及的 OpPattern 包括:kElementwise .kBroadcast ...
- vue 安装教程（如何在node环境下搭建vue项目）
如果要配置node.js环境请查看(node.js环境在Window和Mac中配置,以及安装cnpm和配置Less环境)在终端输入命令 cnpm -v出现版本号 1.安装vue window : ...
- 3种方法实现图片瀑布流的效果（纯JS，Jquery，CSS）
最近在慕课网上听如何实现瀑布流的效果:介绍了3种方法. 1.纯JS代码实现: HTML代码部分: <!DOCTYPE html> <html> <head> < ...
- three.js案例-web3d三维地图大屏炫酷3D地图下钻地图-附源码
炫酷3D地图效果如下: 代码注释非常详细: create() { // 添加雾,随着距离线性增大,只能看到一个小是视野范围内的场景,地图缩小很多东西就会看不清 //this.scene.fog = n ...
- Python函数与模块的精髓与高级特性
本文分享自华为云社区<Python函数与模块的精髓与高级特性>,作者:柠檬味拥抱. Python 是一种功能强大的编程语言,拥有丰富的函数和模块,使得开发者能够轻松地构建复杂的应用程序.本 ...
- 一键自动化博客发布工具,用过的人都说好(51cto篇)
51cto是一个优秀的博客平台,今天给大家讲解一下blog-auto-publishing-tools如何自动发布博客到51cto上. 当然在实现过程中有可能会遇到各种困难,不过不用担心,我们一个个来 ...
- k8s多集群切换：使用kubeconfig文件管理多套kubernetes(k8s)集群
目录 一.系统环境 二.前言 三.kubeconfig文件 四.kubernetes(k8s)多集群切换 一.系统环境 服务器版本 docker软件版本 CPU架构 CentOS Linux rele ...