1. html 结构

  <div id="container">
<div class="item item-1">
<h3>Item 1</h3>
</div>
<div class="item item-2">
<h3>Item 2</h3>
</div>
<div class="item item-3">
<h3>Item 3</h3>
</div>
</div>
<div class="item item-3">
      <h3>Item 3</h3>
    </div>
    <div class="item item-1">
      <h3>Item 1</h3>
    </div>
    <div class="item item-2">
      <h3>Item 2</h3>
    </div>
    <div class="item item-3">
      <h3>Item 3</h3>
    </div>
    <div class="item item-1">
      <h3>Item 1</h3>
    </div>
    <div class="item item-2">
      <h3>Item 2</h3>
    </div>
    <div class="item item-3">
      <h3>Item 3</h3>
    </div>
    <div class="item item-1">
      <h3>Item 1</h3>
    </div>
    <div class="item item-2">
      <h3>Item 2</h3>
    </div>
    <div class="item item-3">
      <h3>Item 3</h3>
    </div>

2. css 样式

#container {
display: flex;
background: #555;
height: 800px;
flex-wrap: wrap;
/* 项目在交叉轴对对齐方式(需要设置高度) */
/* align-items: stretch; */
/* 交叉起点对齐 */
align-items: flex-start;
/* 交叉终点对齐 */
/* align-items: flex-end; */
/* 以中心点进行对齐 */
/* align-items: center; */
/* 按照第一行文字顶部进行对齐 */
/* align-items: baseline; */ /* 项目在主轴的对齐方式 */
/* 左对齐 */
/* justify-content: flex-start; */
/* 右对齐 */
/* justify-content: flex-end; */
/* 居中对齐 */
/* justify-content: center; */
/* 两端对齐 */
/* justify-content: space-around; */
/* 项目与项目之间的距离相等 */
/* justify-content: space-between; */
/* 项目之间的空隙数相等的 */
/* justify-content: space-evenly; */
/* 起点对齐 */
/* align-content: flex-start; */
/* 终点对齐 */
/* align-content: flex-end; */
/* 终点对齐 */
/* align-content: center; */
/* 两个轴线之间的距离是相等的 */
/* align-content: space-around; */
/* 交叉轴的两端进行对齐 */
/* align-content: space-between; */
/* 默认值 */
/* align-content: stretch; */
}
.item {
background: #f4f4f4;
border: #ccc solid 1px;
padding: 1rem;
text-align: center;
margin: 0.75rem;
/* width: 300px; */
flex-basis: 200px;
/* 对齐属性 */
}
/* 指定设置 */
.item-2 {
/* 对单个 item 进行操作 */
align-self: center;
/* auto (默认值)
flex-start
flex-end
center
baseline
stretch */
order: 2;
}
.item-1 {
/* order 可以更改 item 的排列属性 order的值越小他的值就越靠前(默认为0) */
order: 3;
}
.item-3 {
order: 1;
}

这些注释都是方法可以自己尝试一下

3.  常用方法

项目在主轴的对齐方式

      左对齐
      justify-content: flex-start;
      右对齐
      justify-content: flex-end;
      居中对齐
      justify-content: center;
      两端对齐
      justify-content: space-around;
      项目与项目之间的距离相等
      justify-content: space-between;
      项目之间的空隙数相等的
      justify-content: space-evenly;
 
项目在交叉轴对对齐方式(需要设置高度)
   align-items: stretch;
      交叉起点对齐
      align-items: flex-start;
      交叉终点对齐
      align-items: flex-end;
      以中心点进行对齐
      align-items: center;
      按照第一行文字顶部进行对齐
      align-items: baseline;

两个轴的对齐方式

    起点对齐
      align-content: flex-start;
      终点对齐
      align-content: flex-end;
      终点对齐
      align-content: center;
      两个轴线之间的距离是相等的
      align-content: space-around;
      交叉轴的两端进行对齐
      align-content: space-between;
      默认值
      align-content: stretch;
 
指定设置 对齐方式
    .item {
      对单个 item 进行操作
      align-self: center;
  
    方法
      auto (默认值)
      flex-start
      flex-end
      center
      baseline
      stretch
    }
 
order 属性
  order 可以更改 item 的排列属性  order的值越小他的值就越靠前(默认为0)
 

Flex 的 多种对齐属性的更多相关文章

  1. flex三个对齐属性的记忆方式

    今天在群里聊天有人说 flex的那几个居中属性好难记,时不时都要尝试一下,或者查看一下文档,现在我把我自己的记忆方式分享一下... 1. flex的居中主要是通过这三个属性来实现的: justify- ...

  2. Flex的 Event中属性currentTarget与target的区别

    Flex的 Event中属性currentTarget与target的区别 1.区别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  3. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  4. Flex的 Event中属性currentTarget与target的差别

    Flex的 Event中属性currentTarget与target的差别 1.差别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  5. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

  6. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  7. Flex布局-项目的属性

    Flex项目有以下6个属性: order flex-grow flex-shrink flex-basis flex align-self order属性定义项目的排列顺序.数值越小,排列越靠前,默认 ...

  8. Flex布局-容器的属性

    本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...

  9. Flex 布局的各属性取值解释

    Flex布局是一种弹性布局.布局样式比较灵活,大多数情况下可以替代float,而且不会脱离文档里流. Flex中定义了两个轴线,一个主轴一个副轴,这个概念你可以想想屏幕坐标系(X轴向右,Y轴向下),F ...

随机推荐

  1. MSF基本使用

    MSF 链接数据库 linux查找文件 find / -name dabase.yml 链接数据库 db_connect -y path/database.yml db_status 查询数据库链接状 ...

  2. Linux磁盘分区管理-LVM回顾

    LVM(逻辑分区管理)的几个概念:PV(物理卷),VG(卷组),LV(逻辑卷),PE(物理区域),LE(逻辑区域),其中PV, VG, LV 三者之间的关系如下图 : 物理存储介质:这里指系统的存储设 ...

  3. C++ 关于map,function的简单应用

    map<string,function<int(int, int)>> funs =    {        {"+", add},        {&qu ...

  4. django关闭DEBUG,无法加载静态文件

    环境是:Python3.7 Django2.2 出现的问题根本原因是:当我们在开发django应用时如果设置了 DEBUG = True,那么django便会自动帮我们对静态文件进行路由:但是当我们设 ...

  5. 什么时候使用ConcurrentHashMap?

    在问题2中我们看到ConcurrentHashMap被作为故障安全迭代器的一个实例,它允许完整的并发检索和更新.当有大量的并发更新时,ConcurrentHashMap此时可以被使用.这非常类似于Ha ...

  6. 为什么 wait(), notify()和 notifyAll ()必须在同步方法或 者同步块中被调用?

    当一个线程需要调用对象的 wait()方法的时候,这个线程必须拥有该对象的锁,接 着它就会释放这个对象锁并进入等待状态直到其他线程调用这个对象上的 notify() 方法.同样的,当一个线程需要调用对 ...

  7. spring 支持哪些 ORM 框架 ?

    Hibernate iBatis JPA JDO OJB

  8. PRODUCER配置加载

    1.入口 Kafka通过new一个KafkaProducer将配置项进行加载.将用户定义的properties作为参数,构造成一个ProducerConfig对象. public KafkaProdu ...

  9. 在多线程环境下,SimpleDateFormat 是线程安全的吗?

    不是,非常不幸,DateFormat 的所有实现,包括 SimpleDateFormat 都不是 线程安全的,因此你不应该在多线程序中使用,除非是在对外线程安全的环境中 使用,如 将 SimpleDa ...

  10. hadoop 分布式系统与Hadoop MapReduce

    Hadoop分为两部分 Hadoop MapReduce和Hadoop分布式文件系统 1分布式系统由Master Node 和多台 slave Node组成. 1.1MasterNode Master ...