Flex布局摆脱float带来的布局问题
完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。那我们就不能
做高度根据内容自动调整的布局，但是利用flex布局可以实现，不需要设置父元素的宽度和高度，让父元素根据子元素自动调整大小。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局：.div{dispaly:flex}.采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员。这里我主要说一下容器的一个属性flex-direction.他有4个取值分别为：row、row-reverse、column、column-reverse.
row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
代码如下：
可以通过设置flex-direction属性得到不同的效果。下面代码只是设置{flex-direction:row}。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
.div1{
display: flex;
flex-direction: row;
border:1px solid red;
width:300px;
}
.div1 div{
border:1px solid black;
margin:10px 10px;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div class="div1">
<div>a
</div>
<div>b
</div>
<div>c
</div>
</div>
</body>
</html>
Flex布局摆脱float带来的布局问题的更多相关文章
- CSS布局(四) float详解
一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...
- CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
css之浮动布局 本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...
- flex布局帮助你快速实现布局
flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个 ...
- 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局
移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广 ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- 文档流 css中间float clear和布局
文档流 先说说什么是公文流转 什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...
- 文档流 css中的float clear与布局
文档流 先说说什么是文档流 流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;" ...
- 布局方式-float布局
float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流 首先看一个案例,直观的了解下float的特性 <style> .container{ background: red; ...
随机推荐
- java学习笔记(12) —— Struts2 通过 xml /json 实现简单的业务处理
XML 1.引入dom4j-2.0.0.jar 2.引入jquery-1.8.2.js 3.新建common.js getInfo = function(){ $.post("getXmlA ...
- WDCP一些常用的一健安装包可选安装组件
为有更好的性能,也为更简洁的系统,一些不是常用或不是基本的功能,都将做为可选的安装组件需要用到的就安装 memcache的安装 wget -c http://down.wdlinux.cn/in/me ...
- python之socket编程
本章内容 1.socket 2.IO多路复用 3.socketserver Socket socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,对于文件用[打开][读写][ ...
- DotNET知识点总结四（笔记整合）
1.枚举:本质是类 如果为第一个枚举赋了一个int值,那么后面的枚举项依次递增 可以将枚举强转成他所代表的int值 C#的枚举项都是常量(可以用Reflector查看literal的IL源码) 因为枚 ...
- Java was started but returned exit code=13
安装Eclipse(32位)后打开报错:Java was started but returned exit code=13 解决方法: 1,首先我查看了我当前安装的JDK版本,发现是64位的: 2, ...
- 转：BZERO()等的区别
BZERO()等的区别 bzero 原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前 ...
- 解决安装 Visual Studio 2012 后无法连接VPN的问题
1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它: HKEY_LOCAL_MACHINE\System\CurrentControlS ...
- Ubuntu12.04 下安装Chrome浏览器
第一步 下载. 32位:https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb 64位:https://dl. ...
- Intent携带额外的数据的方法
1.putExtras(Bundle data):向Intent中放入需要“携带”的数据.2.putXxx(String key,Xxx data):向Bundle放入Int.Long等各种类型的数据 ...
- JavaScript 中的数字和日期类型
本章节介绍如何掌握Javascript里的数字和日期类型 数字EDIT 在 JavaScript 里面,数字都是双精度浮点类型的 double-precision 64-bit binary form ...