1、flex布局

案例一：

案例二：

  保证不至于缩放得太小或太大

案例三：flex的值不一定要写成几份，可以写成固定值

案例四：

竖着3等分（父容器按照高度3等分）

!!案例  -----用flex布局写携程网（发现携程网是伸缩布局：根据屏幕自适应）

　　flex:  2  意义是啥 （剩余宽度里占比2等份）

flex布局：1、父元素要定义为display：flex   ，

　　　　2、直接子元素布局为flex： n

　　　　3、flex：n 的意思：先用父元素的宽度减去没有设置属性flex的子元素的宽度，把所有属性为flex子元素之和作为剩余宽度要分成的份数，最后属性为flex元素的宽度即为占比数。

　　　　4、若父元素display：flex后  ，那其子元素设置的float都不起作用了，定位还是有用的，但是一般不会这样用

2、justify-content（水平对齐）属性用法作用如下：

                  

3、align-items垂直对齐：适用于单行！

4、flex-wrap属性

5、align-content

6、order

每一份子项目默认值是0

css学习_css3伸缩布局 flex布局的更多相关文章

  1. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  2. CSS布局-flex布局入门教程

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

  3. 学习关于display ：flex 布局问题！

    很多人不明白这个display:flex是到底是什么东西,如何使用的  . 1.什么是display:flex呢? 答:flex是 flexible  box的缩写,意为弹性布局 :这个东西的引入,为 ...

  4. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  5. Css animation 与 float 、flex 布局问题

    1. 有这样一段css html 代码 <div class="container"> <div class="float-left"> ...

  6. css 位置居中篇，flex布局【转】

    最近看到沅老师的博客,关于flex布局的,觉得不错,http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

  7. 经典的横线中间文字css布局---flex布局

    html: <div class="title"> <div class="line"></div> <div cla ...

  8. css学习笔记---盒模型，布局

    1.外边距叠加 当一个元素出现在另一个元素上面时第一个元素的底边距与第二个元素的上边距发生叠加,元素被包含时也有可能会发生叠加(如果没有内边距和边框),如果一个空元素没有内边距和边框本身也会发生上下边 ...

  9. css学习_css3过渡

    1.css3过渡 注意:记住多属性设置的方式:若把过渡写在了hover里面的话鼠标移走时不会有过渡效果!:不同属性同时变时用  all 就可以实现了. 2.css3  transform属性 1.移动 ...

随机推荐

  1. CSS+HTML+JQuery实现条形图

    在工作中遇到了写条形图的情况,因为文字,条形数量和条形图的颜色需要改变,所以不能用图片,所以决定写一个试试,写的比较简单,但毕竟是第一次,也遇到了一些问题,特意记录下来,以免忘记. 因为该页面还需要兼 ...

  2. 在GridView中使用FindControl

    DataRowView dv =(DataRowView)e.Row.DataItem;string id=dv.Row["ProjectID"].ToString(); 1.在行 ...

  3. AGC电路以及AD8347正交解调芯片

    1.AGC电路的工作原理 1.1AGC电路的用途 随着电磁环境的日益恶化, 不同频段电磁信号之间的相互串扰, 以及可能出现的人为干扰, 将会导致接收机输入端口的信号动态范围较大, 一旦出现电路饱和或是 ...

  4. dos.orm

    引言: Dos.ORM(原Hxj.Data)于2009年发布.2015年正式开源,该组件已在数百个成熟项目中应用,是目前国内用户量最大.最活跃.最完善的国产ORM.初期开发过程中参考了NBear与My ...

  5. 【原创】大数据基础之Azkaban（1）简介、源代码解析

    Azkaban3.45 一 简介 1 官网 https://azkaban.github.io/ Azkaban was implemented at LinkedIn to solve the pr ...

  6. liunx mysql 备份

    执行命令:mysqldump -uroot -p lanwei > lanwei2018-08-02.sql 出错 -bash: mysqldump: command not found 查看m ...

  7. Android的路接下来该怎么走？

    其实想写这篇文章好久了,很多小伙伴们也经常在群里探讨android移动开发者的走向,一部分人都想多快好省,间歇性踌躇满志.持续性混吃等死 ,只想用CV的开发模式们快速完成工作,然后回家王者农药.其实这 ...

  8. bzoj 3277

    十分之恶心的后缀自动机 (其实是水题,但是我太弱了...) 首先,有一个预备知识:bzoj 2780https://blog.csdn.net/lleozhang/article/details/89 ...

  9. JS使用小记

    1. JSON解析undefined JSON.parse(undefined) VM4456:2 Uncaught SyntaxError: Unexpected token u 2. 事件传值 o ...

  10. 小程序 -- ui布局

    Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap  :nowrap(不换行)/ wrap(换行,第一行在上方)/ wrap-reverse ...