父级使用弹性盒子:

#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. 链接错误 multiply defined (by misc_1.o and misc.o).

    http://www.stmcu.org/module/forum/thread-286128-1-1.html *** Using Compiler 'V5.06 (build 20)', fold ...

  2. Ubuntu配置vncserver

    https://help.aliyun.com/knowledge_detail/59330.html 首先,安装桌面环境和vnc4server: sudo apt-get install gnome ...

  3. 如何修改mac 电脑的hosts 文件

    mac 电脑的hosts 文件对于一般用户而言是只读的,对于系统管理员而言是可以修改的. hosts文件所在的路径是: /etc/hosts 因为需要系统管理员所以命令是: 输入密码,然后就可以修改了 ...

  4. C++并发编程 互斥和同步

    C++并发编程 异步任务(async) 线程基本的互斥和同步工具类, 主要包括: std::mutex 类 std::recursive_mutex 类 std::timed_mutex 类 std: ...

  5. pandans导出Excel并将数据保存到不同的Sheet表中

    数据存在mongodb中,按照类别导出到Excel文件,问题是想把同一类的数据放到一个sheet表中,最后只导出到一个excel文件中# coding=utf-8import pandas as pd ...

  6. SQL Server 2008自动备份数据库

    1.在电脑开始菜单中选择“SQL Server Management Studio”双击.在出现的界面中点击“连接”按钮. 2.在出现的“ Microsoft SQL Server Managemen ...

  7. JavaSE的学习路线

    基于现阶段的JavaEE学习的对象,主要是趋向于Web的方向,主要就是说在JavaWeb的基础上进行进一步的开发和学习,下面我会将自己总结的对于自己的一点关于JavaEE学习路线会逐步讲解. 第一部分 ...

  8. TestNG指南

    转载自:http://blog.csdn.net/bigapplestar/article/details/7300137 今天突然收到通知,统一改用TestNG写测试用例,开始查这方面的资料,学习一 ...

  9. OpenCV---图像梯度

    图像梯度 推文:[OpenCV入门教程之十二]OpenCV边缘检测:Canny算子,Sobel算子,Laplace算子,Scharr滤波器合辑 图像梯度可以把图像看成二维离散函数,图像梯度其实就是这个 ...

  10. turn服务部署

    centos7.2 git clone https://github.com/coturn/coturnyum -y install openssl-develyum install openssl ...