父级使用弹性盒子:

#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. 《剑指offer》— JavaScript(9)变态跳台阶

    变态跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 实现代码 function jumpFloor(number) { ...

  2. laravel query builder/ Eloquent builder 添加自定义方法

    上次干这事已经是一年前了,之前的做法特别的繁琐.冗余,具体就是创建一个自定义 Builder 类,继承自 Query\Builder,然后覆盖 Connection 里面获取 Builder 的方法, ...

  3. php整理

    linux上安装php配套环境有些繁琐 推荐使用一键安装: https://lnmp.org/install.html phalcon框架环境: centos7下php7.0.x安装phalcon框架

  4. Android缓存

    一个利用内存缓存和磁盘缓存图片的例子 public class BitmapCache { public static final String TAG = "debug"; pr ...

  5. apk文件签名绕过

    声明: 1.本文转载自:http://www.2cto.com/Article/201311/256406.html,为了留作日后参考上传博客 2.如有转载请复试上面连接,尊重原创 apk文件签名绕过 ...

  6. 写文章 使用conda管理python环境

    使用conda管理python环境

  7. Jenkins使用教程之创建job

    第一部分:常规设置(general) 1.点击新建,进入新建项目页面 2.输入项目名称,选择构建一个自由风格的软件项目(里面可以自己自由进行配置,使用更加灵活),点击ok 3.项目名称与描述 4.gi ...

  8. What are the advantages of different classification algorithms?

    What are the advantages of different classification algorithms? For instance, if we have large train ...

  9. Scrollbar的样式

    .test{ /*立体滚动条凸出部分的颜色*/ scrollbar-face-color:#FEFAF1; /*滚动条空白部分的颜色*/ scrollbar-highlight-color:#FEFA ...

  10. UIDynamicBehavior的行为类翻译

    CHENYILONG Blog UIDynamicBehavior的行为类翻译 © chenyilong. Powered by Postach.io Blog