css 弹性布局:

盒子模型:
box-sizing属性
1.content-box 正常的普通的盒子模型用padding和border会使盒子变大;(向外扩张)
2.border-box 盒子模型,padding和border盒子模型不变大;(向内扩张)
calc(计算公式)+ - * /基本用的四种一般前面2中即可;
如 calc(100px - 20px)---->符号前后空格隔开;

caniuse网站查看css属性兼容性!!!;

父级盒子:display:flex; 某些浏览器可能兼容性不好,加上前缀就好;
postCss插件;

如dom结构:
<div class="father">
  <div class="son1"><div>
  <div class="son2"><div>
<div>

<style>
.father{
  width:500px;
  height:400px;
  border:1px solid #ccc;
}
.son1{
  width:100px;
  height100px;
}
.son2{
  width:100px;
  height100px;
}
</style>

如果用了弹性布局,子元素不需要浮动;

父级属性:(子元素会产生的效果;)
1、justify-center:(子元素水平排列)
(center居中,flex-start默认居左,flex-end居右,space-between两端对齐无缝隙;space-around子元素距离左右间距一样)
2、align-items:(子元素垂直排列)
(center垂直居中;flex-start最上面,flex-end最下面,stretch默认值,baseline项目的第一行文字的基线对齐)
3、flex-direction:(子元素排列方向/排列方式)
(row默认横向排列,row-reverse横向翻转,column纵向排列,column-reverse纵向翻转)
4、flex-wrap:(子元素是否一行显示)
(nowrap默认值不换行,wrap换行,wrap-reverse换行,第一行在下方)
5、align-content:(子元素多行情况下的垂直排列,两列紧挨着的效果)
(flex-start上边,flex-end下边,stretch默认值)
6、flex-flow:(flex-direction和flex-wrap结合体简言之就是简写缩写;也就是两个值写一起)

基于ul li布局外层最好包一层div好控制布局;

子元素属性:(设置在子元素会使子元素产生的效果)
1、flex 1(auto) 0(none)指的是系数;
2、aligin-self 覆盖父级align-items垂直排列;
3、flex-grow:1; 定义子元素放大比例;假如有两个div一行的话可以使它占满;
4、order:规定子元素排列顺序,数值越小越靠前。
5、flex-shrink: 缩小比例;默认为1;负值对该属性无效;
6、flex-basis:auto(默认值)它可以设为跟width或height属性一样的值(比如350px),则子元素将占据固定空间;

简单探讨弹性布局flex的更多相关文章

  1. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  2. 弹性布局flex

    前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...

  3. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

  4. 弹性布局Flex的基本语法

    一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...

  5. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

  6. 弹性布局-flex

    浅谈display:flex   display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部 ...

  7. 弹性布局--flex方向

    flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...

  8. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  9. 弹性布局flex 介绍

    摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...

随机推荐

  1. How can I pass data from Flask to JavaScript in a template?

    https://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-flask-to-javascript-in-a-templ ...

  2. DataTabless Add rows

    参考官网案例:https://datatables.net/examples/api/add_row.html JS: $(document).ready(function() {     var t ...

  3. CMMI Institute Conference 2014中国大会

    我在大会上做SPD(Strategic Policy Deployment战略部署策略)的演讲,和来自各个公司的高管进行了热烈的讨论.获得好评. 有兴趣的朋友能够点击下面链接:Stratehttp:/ ...

  4. 设计模式-(10)观察者模式 (swift版)

    一,概念 观察者(Observer)模式又名发布-订阅(Publish/Subscribe)模式.GOF给观察者模式如下定义:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它 ...

  5. mongo13----application set与分片结合

    replation set配合分片 打开3台服务器,B服务器()放configserv, C,D服务器(203.204)放置复制集 .203和192.168.1.204分别运行之前的sh start. ...

  6. Linux MTD下获取Nand flash各个参数的过程的详细解析【转】

    本文转载自:https://www.crifan.com/files/doc/docbook/nand_get_type/release/html/nand_get_type.html 文章不错可以看 ...

  7. python的thread和threading区别

    python提供了多种模块用来支持多线程编程, thread(在python3中改名为_thread),threading,和 queue模块. 通过加入queue模块,用户可以创建多个线程共享数据的 ...

  8. 循环冗余检验 (CRC) 算法原理

    Cyclic Redundancy Check循环冗余检验,是基于数据计算一组效验码,用于核对数据传输过程中是否被更改或传输错误. 算法原理 假设数据传输过程中需要发送15位的二进制信息g=10100 ...

  9. windows 2003 server 64 位 IIS 6下部署 32位网站

    在 C:\WINDOWS\system32\inetsrv\MetaBase.xml 设置节点 在 开始--->运行--->输入一下代码,回车即可,就会跳出正在安装NET2.0 代码为   ...

  10. MD5加密 和Sha256加密

    //MD5加密 private static string GetMd5Hash(string emailAddress) { byte[] data = MD5.Create().ComputeHa ...