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 ...
随机推荐
- MSSQL—存储过程分页
SET QUOTED_IDENTIFIER ON SET ANSI_NULLS ON GO CREATE PROCEDURE [dbo].[GetPagingStr] @PRESQL VARCHAR( ...
- 不只有 Spring，这四款 Java 基础开发框架同样值得关注！ 审核中
Java 开发不只有 Spring ,今天给大家推荐几个同样优秀的 Java 基础开发框架,为日常项目开发提供更多的选择.答应我,请不要再叫我 Spring 小子了,好吗? 项目概览: Guice: ...
- 基于FPGA的二进制转BCD
BCD码(nary-Coded Decimal)又称二-十进制代码,亦称二进码十进数.是一种二进制的数字编码形式,用二进制编码的十进制代码.这种编码形式利用了四个位元来储存一个十进制的数码. 在数字 ...
- 原生js写悬浮广告效果
网上抄的,改成vue写法失败,下一篇是自己写的vue版本的 <html> <head> <meta http-equiv="Content-Type" ...
- 接私活利器！推荐一个基于SpringBoot3的后台管理框架
大家好,我是 Java陈序员. 今天,给大家推荐一个后台管理框架,适合二次定制开发.接私活.源码学习等场景. 关注微信公众号:[Java陈序员],获取开源项目分享.AI副业分享.超200本经典计算机电 ...
- VUE+element页面按钮调用dialog
VUE+element通过按钮调用普通弹框(弹框页面独立出一个dialog页面,非在同一个页面文件里) 代码如下 <el-dialog> <el-button type=" ...
- R4_Elasticsearch Mapping parameters
Elasticsearch的Mapping,定义了索引的结构,类似于关系型数据库的Schema. Mapping Type:每个索引都拥有唯一的 mapping type,用来决定文档将如何被索引.从 ...
- Canvas简历编辑器-我的剪贴板里究竟有什么数据
Canvas图形编辑器-我的剪贴板里究竟有什么数据 在这里我们先来聊聊我们究竟应该如何操作剪贴板,也就是我们在浏览器的复制粘贴事件,并且在此基础上聊聊我们在Canvas图形编辑器中应该如何控制焦点以及 ...
- 如何提高WordPress的加载速度
针对wordpress加载速度慢的原因: 1. 由于Wordpress系统默认使用谷歌字体,在国内谷歌域名被屏蔽,所以导致操作反应慢.对于很多商业主题默认使用了谷歌字体.谷歌ajax库.谷歌地图等谷歌 ...
- Centos7安装openJdk17
yum 安装 安装 EPEL 软件源:使用以下命令安装 EPEL 软件源,它包含了 OpenJDK 17 的安装包. sudo yum install epel-release sudo yum in ...