【CSS】flex布局初认识
1. 父容器为Flex容器,它有以下六个属性:
1)flex-direction:
作用:决定主轴的方向(如果为row,那么x方向为主轴;如果为column,那么y方向为主轴)
属性:row | row-reverse | column | column-reverse; 2)flex-wrap:
作用:换行,如果项目在一个主轴上排不下,如何换行
属性:nowrap | wrap | wrap-reverse; 3)flex-flow:
作用:flex-direction + flex-wrap 的简写
属性:
默认值为: flex-flow: row nowrap; 4)justify-content:
作用:定义项目在主轴上的对齐方式
属性:flex-start | flex-end | center | space-between | space-around; 5)align-items:
作用:定义项目在交叉轴上如何对其
属性:stretch | flex-start | flex-end | center | baseline; 6)align-content:
作用:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
属性:stretch | flex-start | flex-end | center | space-between | space-around
align-content的效果如下(x方向为主轴):
stretch (默认值) flex-start flex-end
center space-between space-arround
2. Flex容器下的项目(子)
1)order 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2)flex-grow
3)flex-shrink 定义了项目的缩小比例,默认为1。
4)flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size)
5)flex flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6)align-self 自定义垂直方向的对其方式,允许单个项目有与其他项目不一样的对齐方式,
可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属
性,如果没有父元素,则等同于stretch。
3 auto与none
flex:auto; 等同于 flex:1 1 auto; 意思就是占满额外空间,可缩放。
flex:none; 等同于flex:0 0 auto; 意思是不占额外空间,不可缩放。从字面上解释大概就是可弹性与不可弹性。
flex:initial(默认) 等同于 0 1 auto;意思是不能伸长(不占满额外空间),可缩放。
4 转发链接
1. flex-grow、flex-shrink、flex-basis详解
2. flex-grow、flex-shrink、flex-basis详解
3.Flex布局整理
5 附测试代码
<!DOCTYPE=html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>
Align-content
</title>
<style>
#father{
width:200px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:strech;
height:200px;
background-color:grey;
}
.son1{
height:30px;
width:100px;
background-color:orange;
}
.son2{ height:30px;
width:100px;
background-color:red;
}
.son3{
height:30px;
width:100px;
background-color:#08a9b5;
}
</style>
</head>
<body>
<div id="father">
<div class="son1">
1
</div>
<div class="son2">
2
</div>
<div class="son3">
3
</div>
<div class="son3">
4
</div>
<div class="son3">
5
</div>
</div>
</body>
</html>
代码来自:https://www.cnblogs.com/liyu2012/p/5525609.html
-end-
【CSS】flex布局初认识的更多相关文章
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- [Web 前端 ] 还在用浮动吗?CSS flex布局你了解多少?
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
随机推荐
- uiautomatorviewer报错“Error taking device screenshot: EOF” ,
uiautomatorviewer报错“Error taking device screenshot: EOF” ,千万不要装手机助手,不要装手机助手,不要装手机助手 uiautomatorview ...
- weblogic获取应用目录路径(war包)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...
- Windows与系统信息相关的DOS命令
首先,以管理员身份打开CMD命令框, 输入 start msinfo32:回车之后,出现一个弹窗,上面有大部分的系统信息:系统版本,电脑名称,BIOS,CPU,内存等: wmic bios:显示BIO ...
- jwt vs session 以rails 为例 (翻译部分)
原文地址:https://pragmaticstudio.com/tutorials/rails-session-cookies-for-api-authentication 普通方式: 令牌为基础的 ...
- #254 Find the Longest Word in a String
找出最长单词 在句子中找出最长的单词,并返回它的长度. 函数的返回值应该是一个数字. 当你完成不了挑战的时候,记得开大招'Read-Search-Ask'. 这是一些对你有帮助的资源: String. ...
- 《JavaScript 高级程序设计》读书笔记三 基本概念
一 语法 区分大小写,驼峰式书写方式: 严格模式:“use strict”: 二 数据类型 a. 基本数据类型: undefined 声明变量未初始化 null 空指针,可以释放内存 Boole ...
- 自动化单元测试工具 EvoSuite 的简单使用 【转载】
转载:https://www.cnblogs.com/hughding/p/evosuite.html 一.EvoSuite简介 EvoSuite是由Sheffield等大学联合开发的一种开源工具,用 ...
- 笔记:Zygote和SystemServer进程启动过程
简述 Android设备启动过程中,先是Linux内核加载完,接着Android中的第一个进程init启动,它会启动一些需要开机启动的进程. Zygote就是进程init启动起来的.Android中所 ...
- Hadoop 倒排索引
倒排索引是文档检索系统中最常用的数据结构,被广泛地应用于全文搜索引擎.它主要是用来存储某个单词(或词组)在一个文档或一组文档中存储位置的映射,即提供了一种根据内容来查找文档的方式.由于不是根据文档来确 ...
- CTF中文件包含的一些技巧
i春秋作家:lem0n 原文来自:浅谈内存取证 0x00 前言 网络攻击内存化和网络犯罪隐遁化,使部分关键数字证据只存在于物理内存或暂存于页面交换文件中,这使得传统的基于文件系统的计算机取证不能有效应 ...