父级使用弹性盒子:

#fu{
display:flex;
}

父级中子级的对齐方式:

1.水平对齐方式:两端对齐

#fu
  {
display:flex;
justify-content:space-between;
}

2.水平对齐方式:作为个体,等分几份,在同一行内居中对齐

#fu
  {
display:flex; justify-content:space-around;
}

3.水平对齐方式:作为整体,同一行内居中对齐

#fu
  {
display:flex; justify-content:center;
}

4.水平对齐方式:作为整体,同一行内对齐至开始端

#fu{
display: flex;
justify-content: flex-start;
}

5.水平对齐方式:作为整体,同一行内对齐至结束端

#fu{
display: flex;
justify-content: flex-end;
}

6.垂直对齐方式:作为整体,同一列内垂直居中

#wai{
display: flex;
align-items: center;
}

6.垂直对齐方式:作为整体,同一列内垂直居上

#wai{
display: flex;
align-items: auto;
}

6.换行方式:自动换行

#wai{
display: flex;
flex-wrap: wrap;
}

css3代码整理—弹性盒子篇的更多相关文章

  1. css3系列之弹性盒子 flex

    弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性  ctrl + F   如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...

  2. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  3. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  4. css3:神秘的弹性盒子flexbox

    请先运行demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  6. CSS3总结五:弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  7. 【CSS3】 CSS3:弹性盒子(Flex Box)

    Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...

  8. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

  9. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

随机推荐

  1. go的web框架beego

    安装 beego 包含一些示例应用程序以帮您学习并使用 beego 应用框架. 您需要安装 Go 1.1+ 以确保所有功能的正常使用. 你需要安装或者升级 Beego 和 Bee 的开发工具: $ g ...

  2. Myeclipse下配置SVN报错问题 svn: E175002: java.lang.RuntimeException: Could not generate DH keypair,缺少subclipse插件的javaHL

    在myeclipse10.0下安装svn插件,出现了Could not generate DH keypair,这么一个错误. 看到了一篇博客说是svn接口选择问题,可是我myeclipse没有那个接 ...

  3. The 14th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - F 贪心+二分

    Heap Partition Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge A sequence S = { ...

  4. 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) F dfs序+树状数组

    Performance ReviewEmployee performance reviews are a necessary evil in any company. In a performance ...

  5. windows环境下封装条件wait和signal

    linux 环境有提供好的pthread_cond_wait() 和 phread_signal().pthread_broadcast() windows需要自己封装,利用semophore控制线程 ...

  6. 《提升c++性能的编程技术》读书笔记

    http://note.youdao.com/noteshare?id=9ab0eda264c85b774021426867e18eae

  7. ubuntu下MySQL的安装与卸载

    1. 删除mysql a. sudo apt-get autoremove --purge mysql-server-5.0 b. sudo apt-get remove mysql-server c ...

  8. em与px区别-CSS教程

    在现在的网页设计中,网页设计者都非常注重用户体验.而CSS中,font-size使用em还是px,如果选择不好将会影响到我们的用户体验.大部分的网页设计者认为px比em容易使用,或者有些根本就不知道e ...

  9. 为什么 .NET 会被叫做 .NET?

    微软开发.NET Framework是在20世纪90年代后期,最初是叫做“下一代Windows服务”(Next Generation Windows Services 简称 NGWS). 那么为什么微 ...

  10. 谈谈"求线段交点"的几种算法(js实现,完整版)

    "求线段交点"是一种非常基础的几何计算, 在很多游戏中都会被使用到. 下面我就现学现卖的把最近才学会的一些"求线段交点"的算法总结一下, 希望对大家有所帮助.  ...