flex布局学习
教程来自阮一峰的flex布局教程实例篇
容器五大属性:
flex-direction:容器内项目的排列方向
(1)row:横向从左往右排列(默认)
(2)row-reverse:横向从右往左排列，是将元素一个一个的靠右放置，要跟justify-content中的flex-end区分清楚
(3)column:纵向从上往下排列
(4)column-reverse:纵向从下往上排列
flex-wrap:项目排列换行
(1)nowrap:不换行,项目超出容器范围自动缩小项目(默认)
(2)wrap:顺序换行
(3)wrap-reverse:排完序后整行交换
justify-content:项目在主轴上的对齐方式（一定要跟flex-direction区分清楚）
(1)flex-start:左对齐(默认)，或向上对齐
(2)center:居中
(3)flex-end:右对齐，或向下对齐，是将元素从左往右排列完后整体右对齐，要跟flex-direction中的row-reverse区分清楚
(4)spaec-around:元素两边平均等分剩余空白间隙部分，最左（上）或最右（下）和元素之间的距离是1：2
(5)space-between:两端对齐，元素之间平均等分生于空白间隙部分
align-items:交叉轴上元素的对齐方式
(1)flex-start:交叉轴起点对齐（向上或向左）
(2)center:交叉轴居中对齐
(3)flex-end:交叉轴结束位置对齐（向下或向右）
(4)stretch:对未设置高度或高度设置为auto的项目进行拉伸填满容器(默认)
(5)baseline：保证元素中的文字在同一条基准线上
align-content:定义轴线的对齐方式
(1)flex-start:交叉轴起点对齐
(2)center:交叉轴中点对齐
(3)flex-end:交叉轴终点对齐
(4)space-between:与交叉轴两段对齐,轴线之间等距
(5)space-aroud:每根轴线等距
(6)strtch:轴线占满整个交叉轴(默认)
项目属性:
order:定义项目排序顺序,数值越小排列越靠前.默认为0
flex-grow:项目放大比例，默认为0不放大，将剩余空间按比例分配给要放大的元素
flex-shrink:项目缩小比例，设置为0不缩小
flex-basis:为项目设置主轴上的固定空间
align-self:允许单个项目与其他项目不同的对齐方式,可以覆盖align-items属性
(一)骰子的布局
1.1单项目一个点
默认为首行左对齐:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> <style type="text/css">
body{
background-color: black;
}
.box{
/*
*默认为首行左对齐
*/
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
}
.item{
width: 100px;
height: 100px;
margin: 30px;
background-color: #000000; }
.thick-white-border{
/*
*为容器box设置样式
*/
border-color: #ffffff;
border-width: 50px;
border-radius: 20px;/*圆角边框*/
}
.thick-black-border{
/*为元素span设置样式*/
border-color: #000000;
border-radius: 50%;/*把span元素变成圆形*/
}
</style>
</head>
<body>
<div class="box thick-white-border">
<!--
--box为外层容器,是骰子的面
-->
<span class="item thick-black-border"></span>
</div>
</body>
</html>
defalut
设置居中对齐:
/*
*把以下代码加入box样式设置中
*/
justify-content: center;
设置右对齐:
justify-content: flex-end;
设置交叉轴对齐方式,将横向轴下移,显示为中间行左对齐:
.box{
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
align-items: center;
}
中间行,中间对齐:
.box{
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
align-items: center;
justify-content: center;
}
中间行右对齐:
justify-content: flex-end;
靠低行中间对齐:
align-items: flex-end;
justify-content: center;
靠低行右对齐:
align-items: flex-end;
justify-content: flex-end;
1.2双项目2个点
首行两边对齐:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> <style type="text/css">
body{
background-color: black;
}
.box{
/*
*默认为首行左对齐
*/
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
justify-content: space-between;/*首行两边对齐*/
}
.item{
width: 100px;
height: 100px;
margin: 30px;
background-color: #000000; }
.thick-white-border{
/*
*为容器box设置样式
*/
border-color: #ffffff;
border-width: 50px;
border-radius: 20px;/*圆角边框*/
}
.thick-black-border{
/*为元素span设置样式*/
border-color: #000000;
border-radius: 50%;/*把span元素变成圆形*/
}
</style>
</head>
<body>
<div class="box thick-white-border">
<!--
--box为外层容器,是骰子的面
-->
<span class="item thick-black-border"></span>
<span class="item thick-black-border"></span>
<!--CSS文件中的样式设置类可以复用,无需为新span元素单独设置样式-->
</div>
</body>
</html>
双项目2个点
等距对齐:
justify-content: space-around;
双项目纵向排列,默认首列:
.box{
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
flex-direction: column;
justify-content: space-around;
}
双项目,骰子2点布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> <style type="text/css">
body{
background-color: black;
}
.box{
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
justify-content: space-around;
}
.item{
width: 80px;
height: 80px;
margin: 30px;
background-color: #000000;
display: flex;
}
.item:nth-child(2){
align-self: center;
} .thick-white-border{
/*
*为容器box设置样式
*/
border-color: #ffffff;
border-width: 50px;
border-radius: 20px;/*圆角边框*/
}
.thick-black-border{
/*为元素span设置样式*/
border-color: #000000;
border-radius: 50%;/*把span元素变成圆形*/
}
</style>
</head>
<body>
<div class="box thick-white-border">
<!--
--box为外层容器,是骰子的面
-->
<span class="item thick-black-border"></span>
<span class="item thick-black-border"></span> </div>
</body>
</html>
骰子2点
1.3三项目:
骰子三点斜线布局;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> <style type="text/css">
body{
background-color: black;
}
.box{
width: 400px;
height: 400px;
background-color: ghostwhite;
display: flex;
}
.item{
width: 80px;
height: 80px;
margin: 30px;
background-color: #000000;
display: flex;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
} .thick-white-border{
/*
*为容器box设置样式
*/
border-color: #ffffff;
border-width: 50px;
border-radius: 20px;/*圆角边框*/
}
.thick-black-border{
/*为元素span设置样式*/
border-color: #000000;
border-radius: 50%;/*把span元素变成圆形*/
}
</style>
</head>
<body>
<div class="box thick-white-border">
<span class="item thick-black-border"></span>
<span class="item thick-black-border"></span>
<span class="item thick-black-border"></span>
</div>
</body>
</html>
骰子三点布局
样式文件分离：
便于样式的修改
在页面page文件中的同目录下新建CSS文件，在pages文件中使用@import导入CSS样式文件
flex布局学习的更多相关文章
- flex 布局学习
flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...
- CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
- Flex布局学习笔记
任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...
- flex布局学习总结
最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...
- Flex 布局学习笔记
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- FreeMusic项目优化（一）——flex布局学习记录
参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- flex布局学习总结--阮一峰
基本概念: 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex it ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
随机推荐
- Android艺术——性能优化问题
这次分析方向,我们主要包括:布局优化.绘制优化.内存泄漏优化.响应速度优化.ListView优化.Bitmap优化.线程优化. 布局优化:尽量的减少布局的层级,这意味着Android绘制时的工作量会变 ...
- 深入了解servlet
一.web项目结构 |- WebRoot : web应用的根目录 |- 静态资源(html+css+js+image+vedio) |- W ...
- mysql原生语句基础知识
要操作数据库,首先要登录mysql: *mysql -u root -p 密码 创建数据库: *create database Runoob(数据库名); 删除数据库: *drop database ...
- for循环增强
for(声明语句 : 表达式) { //代码句子 } 声明语句:声明新的局部变量,该变量的类型必须和数组元素的类型匹配.其作用域限定在循环语句块,其值与此时数组元素的值相等. 表达式:表达式是要访问的 ...
- python-装饰器初解
# 装饰器的作用# 不想修改函数的调用方式( func() 还是这样调用),但是还想再原来函数前后添加功能# timer() 就是一个装饰器函数,只对一个函数,有一些装饰作用 import time ...
- DS博客作业02--线性表
1.本周学习总结 1.1思维导图 1.2.谈谈你对线性表的认识及学习体会 这阶段学习学的是线性表,学习线性表的两种存储顺序-----链表和顺序表,体会了两者存储结构之间的区别,通过对顺序表,单链表,双 ...
- C语言博客作业03--函数
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 这周最大的收获就是学习函数,并且通过对函数的封装来做成一个简单的小程序,这周做的最有意义的事情就是做了老 ...
- 上板子在线抓波发现app_rdy一直为低
现象 使用Xilinx的MIG IP测试外挂DDR3的读写发现一段很短的时间后app_rdy恒为低,并且最后一个读出的数据全是F. (1)不读写数据,app_rdy正常为高,MIG IP初始化信号为高 ...
- git常用命令介绍
一,仓库 1. git init 把当前目录变成git可管理得仓库,也就是初始化仓库 2. git add 文件名 在仓库中添加新文件 3. git commit -m & ...
- LOJ#2085 循环之美
解:首先看这个纯循环到底是什么玩意..... 经过一番打表,发现纯循环小数就是分母与进制互质的既约分数. #include <bits/stdc++.h> std::bitset<& ...