先来看看一个例子

在一个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. WTL设置对话框背影色

    MainDlg.h // MainDlg.h : interface of the CMainDlg class // //////////////////////////////////////// ...

  2. Windows下查看dll被哪个进程调用

    卸载程序,结果没卸载干净---程序的安装目录中还剩下一个dll文件.想删,结果系统提示说dll文件被某个进程占用了,不让删. 先前碰到这种做法,我都是直接使用unlocker先unlock一下,然后删 ...

  3. 学习CSS之用CSS绘制一些基本图形

    一.三角形 如下图,通过设置 border 的大小和颜色可以形成四个三角形: 上图对应的代码为: /* 三角形 */ .triangle {     width: 0;     height: 0; ...

  4. 再次聚焦DOCKER MACHINE CODE 2048

    如果有一种feeling让世界难以释怀,那一定是发掘(挖土机那家强?)了什么了不起的东西 如果有一种贴图叫做深夜,仍不止息,那一定是饱含深意的贴图 // TODO: I'm not super hap ...

  5. 【基础】CodeBlocks调试器基本使用方法

     CodeBlocks是一个开放源码的全功能的跨平台C/C++集成开发环境. 下载地址:http://www.codeblocks.org/downloads/26 其中,Windows环境下可以使用 ...

  6. CentOS使用465端口发送邮件

    1)邮件发送示例 方法1:echo "This is a test mail" | mail -s '邮件测试' 452666750@qq.com 方法2:mail -s '服务运 ...

  7. OFDM Modulation Scheme

  8. 吴恩达deepLearning.ai循环神经网络RNN学习笔记_看图就懂了！！！(理论篇)

    前言 目录: RNN提出的背景 - 一个问题 - 为什么不用标准神经网络 - RNN模型怎么解决这个问题 - RNN模型适用的数据特征 - RNN几种类型 RNN模型结构 - RNN block - ...

  9. 记一次kubernetes驱逐踩坑

    最近在公司的线上服务器上发现了一个现象: 将某个node的kubelet短暂的停掉之后,其上的pod马上会被驱逐,这让笔者大吃一惊,印象之中,停掉kubelet后,该node会变为NotReady状态 ...

  10. Cacti 抓取数据方式 安装spine

    安装好cacti后首先要设置获取数据的方式 Cacti 获取数据的方式有两种,1.监控端的脚本(可以是php, shell, perl 或其他脚本)2.或者 snmp 协议获取. Cacti 会在固定 ...