父级使用弹性盒子:

#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. python学习(十六)写爬虫爬取糗事百科段子

    原文链接:爬取糗事百科段子 利用前面学到的文件.正则表达式.urllib的知识,综合运用,爬取糗事百科的段子先用urllib库获取糗事百科热帖第一页的数据.并打开文件进行保存,正好可以熟悉一下之前学过 ...

  2. python使用pwd和grp操作unix用户及用户组

    1.pwd模块 pwd模块提供了一个unix密码数据库即/etc/passwd的操作接口,这个数据库包含本地机器用户帐户信息 常用操作如下: pwd.getpwuid(uid):返回对应uid的示例信 ...

  3. Install Terraform on Windows, Linux and Mac OS

    Step-by-step tutorial of how to download and install Terraform on Windows, Linux and Mac OS. Terrafo ...

  4. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443

    环境 阿里云 centos7 node v8.11.3 npm 5.6.0 错误 npm update 解决 ping registry.npmjs.org 发现https://registry.np ...

  5. 有向图博弈+出度的结合 Codeforces Round #406 (Div. 2) C

    http://codeforces.com/contest/787/problem/C 题目大意:有一个长度为n的环,第1个位置是黑洞,其他都是星球.已知在星球上(不含第一个黑洞)有一位神.有两个人, ...

  6. 其他:strtok和sscanf结合输入读取一行整数

    gets(buf); int v; char *p = strtok(buf," "); while(p) { sscanf(p,"%d",&v); p ...

  7. SQL语句(二十二)—— 权限授予和回收(作业练习)

    CREATE TABLE course ( Cno ) NOT NULL, Cname ) DEFAULT NULL, Cpno ) DEFAULT NULL, Ccredit smallint DE ...

  8. c# 重载运算符(ovveride operator)踩坑记,关于null比对

    场景描述: 需要比对两个版本的对应对象是否完全一致(每个属性值一致),不一致的导出报表颜色标识,以便提醒后续使用报表人员. 实现思路: 对象重载ToString方法,另实现一比对基类(为了通用)重载= ...

  9. 从零搭建SSM框架(二)运行工程

    启动cnki-manager工程 1.需要在cnki-manager 的pom工程中,配置tomcat插件.启动的端口号,和工程名称. 在cnki-manager的pom文件中添加如下配置: < ...

  10. python初步学习-python函数(一)

    python 函数 函数是组织好的,可重复使用的,用来实现单一或者相关联功能的代码段. 函数能提高应用的模块性和代码的重复利用率. 函数定义 python中函数定义有一些简单的规则: 函数代码块以de ...