先来看看一个例子

在一个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. An internal error occurred during: "Launching New_configuration". Path for project must have only on

    在Eclipse中按照如下操作 Project -> Properties -> Run/Debug Settings: 1. select "Launching New_con ...

  2. LintCode 433. 岛屿的个数（Number of Islands）

    LintCode 433. 岛屿的个数(Number of Islands) 代码: class Solution: """ @param grid: a boolean ...

  3. 一个工程中cpp文件的编译顺序

    做了一个实验. 最后build失败,失败的原因是变量i被重定义了.原本按照我的思路,是不应该失败的.因为我用了条件编译,若先编译Source.cpp,则会#define __HEADER_H__并且定 ...

  4. 【C++】C++程序链接失败，无法解析的外部命令，无法解析的外部符号 "private: static class * Object::current"

    C++程序编译结束后,出现链接失败提示: 严重性    代码    说明    项目    文件    行    类别    禁止显示状态错误    LNK2001    无法解析的外部符号 &quo ...

  5. 获取页面form表单对象的方式

    w3c并没有提供标准的这种使用方式,所以各浏览器实现会有差异,还是使用标准的w3c标准,getElement的方式. 记录下,老是忘记 使用documen对象的方法 getElementxxx 方式, ...

  6. [Redis-CentOS7]Redis列表操作(三)

    LPUSH添加列表 127.0.0.1:6379> LPUSH websites www.baidu.com (integer) 1 LRANGE 获取全部值 127.0.0.1:6379> ...

  7. cornerstone使用beyond compare比较工具

    prefrences->general->external compare tool->open script foder 新建一个bc.sh文件(名字可以任意,sh后缀即可)保存到 ...

  8. Linux学习小记（1）---nm*ip

    注意在CentOS7中ifconfig等命令已经被ip取代,ip的功能很强大,而NetworkManager系列命令(nmcli nmtui等)可以用于配置网络连接

  9. 生成JavaDoc文档

    JavaDoc是一种将注释生成HTML文档的技术,生成的HTML文档类似于Java的API,易读且清晰明了.在简略介绍JavaDoc写法之后,再看一下在Intellij Idea 中如何将代码中的注释 ...

  10. sql的一般查询语句(增删改查中的查)

    /*例子 判断规则 http://xxx.xxx/new.php?id=57 and 1=1 正确 http://xxx.xxx/new.php?id=57 and 1=2 错误 http://xxx ...