flex 垂直方向两端对齐

有这么一个需求，flex 容器高度固定，其中的2个子项在垂直方向上两端对齐，代码如下：

   <div class="bg"><div style="width: 100%;"><span>aaaaaaaaa</span></div><div style="width: 100%;"><div>bbbbb</div><div>ccccc</div></div>      </div><style type="text/css">.bg{width: 200px;height: 300px;background-color: gray;margin: 0 auto;display: flex;flex-wrap: wrap;align-content: space-between;}</style>

flex-wrap: wrap 和设置子项宽度width：100%就保证了子项占一行，那么align-content属性就会生效，再设置align-content: space-between; 就能保证两端对齐了。

注意这种实现方式还有个必须条件是要设置flex容器的高度

flex 垂直方向两端对齐相关推荐

flex 居中并两端对齐
h3{display: flex;align-items: center;justify-content: space-between; }
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
vue垂直布局_基于 Flex 实现两端对齐垂直布局
一般来说布局我们都是水平布局,最多搞个垂直居中.而且对于一些 float . position 好像本身就不太适合垂直布局. 正好前段时间用 weex 做了一个页面,weex 天生基于 flex .且 ...
利用flex弹性布局实现图片水平及垂直方向居中
display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局注意:(Flex是Flexible Box的 ...
Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
CSS用flex布局两端对齐，列不满左对齐
布局上要求两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between; 实现时发现最后一行不能左对齐,而是两端对齐方式. # 网上查了一 ...
如何实现以上垂直方向上两个TextView内文字左右对齐
会员号昵称如何实现以上垂直方向上两个TextView内文字左右对齐呢? 网上给出了各种,什么加空格,加标点,证明没有靠谱的! 最后想到一个最简单的方式: 1. 将所有文字字符串都增加到最大 ...
flex布局两端对齐，不留空
方法一: flex两端对齐,每行四个. 弄个空的div,判断整除的结果来显示空div的个数 " Math.ceil ( num 必须是数字 / 4 ) " [一行4个,即除以4] ...
display:inline-block+text-align:justify实现列表元素的两端对齐
display:inline-block+text-align:justify实现列表元素的两端对齐. 2011-09-21 08:49:22 display:inline-block+text-al ...

flex 垂直方向两端对齐

flex 垂直方向两端对齐相关推荐

最新文章

热门文章

flex 垂直方向 两端对齐

flex 垂直方向 两端对齐相关推荐

最新文章

热门文章

flex 垂直方向两端对齐

flex 垂直方向两端对齐相关推荐