父级使用弹性盒子:

#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. Hdu5181 numbers

    numbers Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 196608/196608 K (Java/Others)Total ...

  2. Problem D. Country Meow 2018ICPC南京

    n个点求出最小圆覆盖所有点 退火算法不会,不过这题可以用三分套三分写 x轴y轴z轴各三分 #include <cstdio> #include <cstring> #inclu ...

  3. bzoj 2081 [Poi2010]Beads hash+调和级数

    2081: [Poi2010]Beads Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1003  Solved: 334[Submit][Statu ...

  4. Mac环境下SVN的配置和使用

    简单记录一下在Mac环境下,SVN的配置步骤和使用相关.(Mac自带了svn的服务器和客户端功能,简单配置一下即可使用) 一.SVN的配置方法 1. 创建一个仓库目录,比如在/Users/你的用户名 ...

  5. [LeetCode] 31. Next Permutation ☆☆☆

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  6. JS自学大全

    JS是从上往下执行的 console.log();输出语句console.warn();错误提示语句 黄色三角形感叹号console.error();错误提示 红色圆Xalert();弹窗docume ...

  7. 2.redis设计与实现--链表

    1.链表节点: 2.链表: 3.总结

  8. java网络传输数据

    网络文件传输的问题,实际也是一种IO读写的基本问题.对于网络的文件数据写入到服务器的进程中,然后把进程中的网络IO系统传递到客户机,这个阶段,数据以字节流的形式保存.当该字节流被客户进程接受后,客户进 ...

  9. Map集合的两种取出方式

    Map集合有两种取出方式, 1.keySet:将Map中的键存入Set集合,利用set的迭代器来处理所有的键 举例代码如下: import java.util.*; class Test { publ ...

  10. UIDynamicBehavior的行为类翻译

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