先来看看一个例子

在一个div我们把四个按钮全部放到右边去了，看下效果↓

这个时候我们想把第一个按钮左对齐，其他保持不变

这时候我们来个第一个按钮样式上加上 ：margin-right: auto;

再看页面效果↓

同理如果你是左对齐，让最后一个右对齐，就给最后一个按钮样式加上：margin-left: auto;

Flex布局如何实现最后一个元素右对齐，或者第一个元素左对齐的更多相关文章

  1. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

  2. Flex布局如何实现最后一个元素右对齐（CSS）

    在最后一项元素使用样式: margin-left: auto;

  3. flex 布局 初次接触这个好使又不是特别好用的布局方法

    刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...

  4. flex布局注意点：

    1.父元素display:flex之后成为伸缩容器,子元素(除了position:absolute或fixed)无论是display:block或者display:inline,都成为了伸缩项目.2. ...

  5. flex布局全解析

    前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...

  6. flex布局基本语法

    注 : 本文章按照菜鸟教程 Flex布局语法教程为原型稍加修改,以方便自己学习. 菜鸟教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009 ...

  7. 写给 Android 开发的小程序布局指南，Flex 布局！

    一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...

  8. flex布局justify-content属性和align-items属性设置

    前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:h ...

  9. display:flex布局

    /*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...

随机推荐

  1. QT笔记:数据库总结

    http://blog.csdn.net/reborntercel/article/details/6991147 #include <QtSql> QT += sql QSqlDatab ...

  2. 小白学习VUE第二课：环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  3. python之字典遍历方法

    字典遍历分为三种: 遍历key 遍历value 遍历key-value key遍历: >>> person={','city':'BeiJing'} >>> for ...

  4. git命令清单 摘自 阮老师

    常用 Git 命令清单   作者: 阮一峰 日期: 2015年12月 9日 我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60- ...

  5. python学习（3）关于交互输入及字符串拼接

    input是输入语句,用于人机交互. input() 函数接受一个标准输入数据,返回为 string 类型.如果需要输入的未数字,则需要额外定义. sex=input(“Sex:”) #这里会默认为S ...

  6. spark sql 执行计划生成案例

    前言 一个SQL从词法解析.语法解析.逻辑执行计划.物理执行计划最终转换为可以执行的RDD,中间经历了很多的步骤和流程.其中词法分析和语法分析均有ANTLR4完成,可以进一步学习ANTLR4的相关知识 ...

  7. Rust入坑指南：步步为营

    俗话说:"测试写得好,奖金少不了." 有经验的开发人员通常会通过单元测试来保证代码基本逻辑的正确性.如果你是一名新手开发者,并且还没体会到单元测试的好处,那么建议你先读一下我之前的 ...

  8. Hapi+MySql项目实战数据库操作（四）

    数据库访问 下面以Node的ORM框架Sequelize来操作数据库,Mysql为例. 配置数据库连接信息config/db_config.js: //db_config.js module.expo ...

  9. 02_TypeScript数据类型

    typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,写ts代码必须指定类型.   1.布尔类型(boolean) var flag:boolean = true;   2.数字 ...

  10. H3C router cmd

    LAN转WAN:接口下port link-mode route windows CMD,本地连接5的链路本地地址经常有一个百分号加一个数字,该数字即接口索引,fe80::8c79:e4f9:f5a3: ...