小白入门篇:flex布局
因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的流布局快太多了(习惯性流布局+float+position),我觉得当你用完这两者布局之后会大量的减少position和float来布局,没错,是真的快乐,你不用永远都不知道是有多爽,是那种能够让你分泌足够多的多巴胺的快感。赶紧安利一波
- float
- absolute
- fixed
- flex
- grid
- table
- display:flex 此处是直接让父容器下的布局变成了flex布局了,不在是流布局
- flex-direction: row(default) | row-reverse | column | column-reverse 子元素的流向是咋样的 row(从左到右) column(从右到左) 其他两个顾名思义
- flex-wrap: nowrap(default) | wrap | wrap-reverse 默认是不换行(nowrap) wrap是换行到下面 wrap-reverse反之
- flex-flow: <‘flex-direction’> || <‘flex-wrap’> 是上面两个的简写
- justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly; 首先说说这个的用处 这个属性的定义是子元素沿主轴的对齐的位置,flex布局的主轴要么是横的要么就是竖的,因此这个属性是为了定义子元素如何在父容器之中对齐的方式

子元素均匀分布在主轴上;第一项是在起始行,最后一项是在结束行,也就是说,假如如图所示还有第四个元素,会与中间那个平均分配第一个与最后一个之间的空间
子元素均匀分布在主轴上;就我个人认为子元素平均分配到的剩余空间,就相当于对自己设置了一个margin:0 (xx)px;
子元素的分布使得任何两个子元素之间的间距(以及到边缘的空间)相等,白话文就是视觉上平均的排布
看上图就知道是子元素拉伸来填充父容器
(默认是主轴是横轴 , 竖轴的话可以考虑头歪90°看[滑稽] 以下同理) 这里是竖轴的起始位置
当然就顾名思义啦!
就是横轴(主轴)的那一条线对齐 (这个是常用的)
这个我觉得对于用英文来写网站有用吧(想想你们写的英语本的4条线),就有一个基线的概念,但是中文我就不清楚了,回头花生再去了解了解[滑稽]

- display
- flex-direction
- flex-wrap
- justify-content
- align-items(交叉轴)
- align-content(交叉轴的justify-content)


子元素的属性与属性值
- order
- flex-grow
- flex-shrink
- flex-basis
请注意,float,clear和vertical-align对flex项目没有影响(没必要flex真的很强大)

此处是可以使用flex布局
小白入门篇:flex布局的更多相关文章
- 【Unity游戏开发】SDK接入与集成——小白入门篇
一.简介 通常一款游戏开发到后期,一般都会涉及到第三方SDK的接入与集成,对于不熟悉SDK接入的同学来说,接SDK每次都是云里雾里,而熟悉SDK接入的同学又觉得不断地重复做接入SDK工作这样没有成就感 ...
- 【MySQL】Linux下mysql安装全过程——小白入门篇(含有问题详解)
本次安装操作在申请的腾讯云上实现(版本:CentOS Linux release 7.4.1708 (Core) ). 根据教程实现(中途各种挖坑,填坑...),地址:http://www.runoo ...
- Python全栈工程师之从网页搭建入门到Flask全栈项目实战(1) - ES6标准入门和Flex布局
1.简述 1.什么是ES6?ES6, 全称 ECMAScript 6.0,是 JavaScript 的下一个版本标准,2015年6月份发版.ES6的主要目的是为了解决 ES5 的先天不足. 2.了解E ...
- 阿里云学生机——Mysql配置---教小白入门篇
首先,我的学生机默认配置为:CentOS 7.2 64位 + Tomcat 8 + Jdk8 + MySQL5.7.16 扩展:Linux 如何查看 MySQL 版本号----使用命令 mysql - ...
- Monkey小白入门篇
一.monkey简介 中文名:猴子 职业:压力测试小工具 用途:对待测Android应用程序进行压力测试,测试app是否会crash Android官方描述: The Monkey is a prog ...
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- CSS3弹性伸缩布局(下)——flex布局
新版本 新版本的flex布局模型是2012年9月提出的工作草案,这个草案是由W3C推出的最新语法,这个版本立志于指定标准,让新式的浏览器全面兼容,在未来的浏览器更新换代中实现统一. 目前几乎大部分的浏 ...
- Flex布局及其应用
什么是弹性盒子? 弹性盒子是 CSS3 的一种新的布局模式.相对于传统的依赖于display+position+float的布局方式,弹性盒子更加以有效的方式来对一个容器中的子元素进行排列.对齐和分配 ...
- 一劳永逸的搞定 flex 布局
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮, ...
随机推荐
- shell脚本获取网页快照并生成缩略图
获取网页快照并生成缩略图可分两步进行: 1.获取网页快照 2.生成缩略图 获取网页快照 这里我们用 phantomjs 来实现.关于 phantomjs 的详细用法可参考官方网站. 1.安装 我的环境 ...
- leetcode 【Rotate List 】python 实现
题目: Given a list, rotate the list to the right by k places, where k is non-negative. For example:Giv ...
- Java SE 5.0 - SE 8 的功能增强
Table of Contents 前言 Java 5.0 Generics Enhanced for Loop Autoboxing Typesafe Enums Varargs Static Im ...
- springboot04 Ajax json Jquery
一.Ajax 1.同步&异步请求 在所有的请求响应交互世界里,我们有通常会划分出来两种形态的请求, 一种是同步请求.另一种是异步请求 .比如注册.登录.添加数据等等这些请求执行的就是同步请求, ...
- 设置EntityFramework中decimal类型数据精度问题(EF默认将只会保留到2为精度)
原文:设置EntityFramework中decimal类型数据精度 EF中默认的decimal数据精度为两位数,当我们数据库设置的精度大于2时,EF将只会保留到2为精度. e.g. .19990将会 ...
- js动态生成下拉列表
经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...
- hdu 6010 路径交
hdu 6010 路径交(lca + 线段树) 题意: 给出一棵大小为\(n\)的树和\(m\)条路径,求第\(L\)条路径到第\(R\)条路径的交的路径的长度 思路: 本题的关键就是求路径交 假设存 ...
- Tomcat学习笔记(八)
Tomcat载入器(二) Tomcat拥有不同的自定义类加载器,以实现对各种资源库的控制. 1.同一个web服务器里,各个web项目之间各自使用的java类库要互相隔离. 2.同一个web服务器里, ...
- nginx简易部署
Nginx (engine x) 可作为web反向代理服务器.能够代理外部网络上的主机,访问内部网络 1 首先windows下载nginx :http://nginx.org/download/ngi ...
- javaScript构造函数、原型、面向对象编程
js最重要也是最核心的东西就是对象了,入行这么长时间,一直对面向对象一知半解.网上有很多介绍对象对象的内容,这里也做了很多借鉴, 尤其是阮一峰老师的文章.我这里写的大多例子都是阮一峰老师文章的例子,但 ...