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 ...
随机推荐
- 一个随时更新的js库
1.src同级建commFunction=>timer.js 2.main.js引入 import time from '../commonFunction/time' Vue.prototyp ...
- 安装assimp失败
使用Cmake和Visual Studio编译assimp成功(包括Debug和Release),并且安装Release版本也成功,但安装debug版本失败,安装输出信息如下: 通过提示找到脚本文件, ...
- 如何在Ubuntu 16.04上安装和保护MongoDB
第1步 - 添加MongoDB存储库 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14 ...
- cesium问题-关于不同时间模型亮度不一致问题
项目中遇到发布的bim模型在当天不同时间的模型亮度发生变化,尤其是晚上的时候会出现模型很暗.尴了个尬,一度怀疑是自己眼睛有问题,连续几天出现同样的情况,想到可能是时间问题导致的模型亮度不同,于是测试了 ...
- 鸿蒙HarmonyOS实战-Stage模型（开发卡片页面）
一.开发卡片页面 HarmonyOS元服务卡片页面(Metaservice Card Page)是指在HarmonyOS系统中,用于展示元服务的页面界面.元服务是指一组提供特定功能或服务的组件,例如天 ...
- Spring 对 Junit4,Junit5 的支持上的运用
1. Spring 对 Junit4,Junit5 的支持上的运用 @ 目录 1. Spring 对 Junit4,Junit5 的支持上的运用 每博一文案 2. Spring对Junit4 的支持 ...
- 线程同步 进程同步 EventWaitHandle
这个名字LLLLL取相同就能让同一台电脑上两个进程同步 主动控制程序 class Program { static EventWaitHandle eHandle = new EventWaitHan ...
- 【C#】使用WebHttpRequest调用Restful带token接口500 返回401 未授权错误
测试对方的接口,发现单个调用对方接口是可以的,但是多个连续的调用对方接口时,会出现第一条调用一般是200,随后的调用就会报500,401未授权的错误,除了第一条后面的请求数据几乎都不得行. 我于是用f ...
- 记录一次配置iis与Sqlserver的集成windows账户登录
1.连接字符串,要写 "Data Source=[主机名称];Initial Catalog=[数据库名称];Integrated Security=True" 2.iis下配 ...
- sqlserver给某个用户授权某张表得操作权限，并利用这个用户进行跨库查询
Sql表授权 创建用户 此时,改用户登录是看不到任何表的 设置权限 创建连接 EXEC sp_addlinkedserver 'LinkName','','SQLOLEDB','要 ...