现在来总结下自己在项目中用flex布局的一些注意点

1.ui图中的布局方式与justify-content的布局方法不一样

这是就要利用flex-grow的空dom来分开子容器来达到页面布局的效果

2.flex-grow的一个坑

当设置flex-grow的子容器的长度超级无敌长的时候,flex会压缩其他的子容器的长度。当然你肯定不希望其他的子容器被压缩,因此这时就需要设置其他子容器的flex-shrink属性为0,这样就不会被压缩。

3.flex只是比例,但不会换行

flex只能设置子容器之间的比例,但是不能让子容器换行,如果你需要它换行,我建议的是用设置子容器的宽度的百分比,来达到换行的效果。

4.用flex完全避免float的

flex基本可以完全取代float属性,所以如果用flex,就尽力它基本属性来取代float。

5.子容器的一些属性将会失效

flex的布局会让子容器的floatclearvertical-align属性将失效。这里就有个小坑就是图片因为有基线的存在,会有一些间隙(这个只有有空写下),不过设置图片的display为block就可以解决。

flex布局的一些注意点的更多相关文章

  1. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  10. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

随机推荐

  1. TX2 dts、dtb编译与反编译

    设备树(Device Tree)包括DTC(device tree compiler),DTS(device tree source和DTB(device tree blob). dtc编译器能够把 ...

  2. flask-restful基础

    flask-restful基本使用 基本使用 from flask_restful import Api,Resource,reqparse,inputs from flask import Flas ...

  3. ubuntu系统下如何切换输入法

    如何切换输入法:ctrl+空格键 输入中文时如何翻页:键盘上的 - +两个键 super表示:美式键盘中的Win键

  4. linux 检测服务器端口工具

    #nmp# nmap 127.0.0.1 #netstat# netstat -anlp | grep 22 #telnet# 服务器端口即使处于监听状态,但是防火墙iptables屏蔽了该端口,是无 ...

  5. 1144 The Missing Number (20 分)

    Given N integers, you are supposed to find the smallest positive integer that is NOT in the given li ...

  6. PHP中Session ID的实现原理

    前序: 首先要明白PHPSESSID看似多次刷新都不会改变其实是没有删除本地相关联的cookie,删除的方法 session_destroy();//删除服务器端的session文件 setcooki ...

  7. 分享一个js方法

    这是一个关于参数合并的方法,这个场景也经常遇到,比如我们现在要对微信小程序的wx.request进行再一次封装,会涉及到一些默认的参数和每次使用自己传递的参数合并问题,分享代码. var extend ...

  8. PIE SDK打开长时间序列数据

    1. 功能简介 时间序列数据(time series data)是在不同时间上收集到的数据,这类数据是按时间顺序收集到的,用于所描述现象随时间变化的情况.当前随着遥感卫星技术日新月异的发展,遥感卫星的 ...

  9. 转 C#对多个集合和数组的操作(合并,去重,判断)

    在开发过程中.数组和集合的处理是最让我们担心.一般会用for or foreach 来处理一些操作.这里介绍一些常用的集合跟数组的操作函数. 首先举例2个集合A,B. List<int> ...

  10. 转 Oracle]如何在Oracle中设置Event

    https://www.cnblogs.com/gaojian/p/7619960.html 为了调查Oracle 的故障,可以通过设置event ,来了解详细的状况.方法如下: ■ 如果使用 SPF ...