Flex布局 写法示例

Flex布局,可以简便、完整、响应式地实现各种页面布局。

多个元素在一行

HTML

<div class="ly">
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
  <div class="ly__item">xxx</div>
</div>

CSS

.ly {
    display: flex;
}

多个元素水平居中对齐

.ly {
  display: flex;
  justify-content: center;
}

多个元素水平两端对齐

.ly {
  display: flex;
  justify-content: space-between;
}

多行多个元素水平两端对齐

.ly {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

多个元素在一行,某个元素占据剩余部分

.ly {
  display: flex;
}
// 给占据剩余部分的元素加该类名
.ly__item--fill {
  flex-grow: 1;
}

多个元素水平居右对齐

.ly {
  display: flex;
  justify-content: flex-end;
}

多个元素垂直居中

.ly {
  display: flex;
  align-items: center;
}

多个元素水平垂直居中对齐

.ly {
  display: flex;
  justify-content: center;
  align-items: center;
}

更多关于 Flex 的内容见这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python研发

CSS,注意点!!!!!!!

4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

14830
来自专栏Android干货

自定义控件详解(三):Canvas效果变换

30350
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

27160
来自专栏偏前端工程师的驿站

CSS布局:水平居中

前言                                 一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开...

40780
来自专栏desperate633

浅谈JavaScript如何操作html DOMJavaScript 能够改变页面中的所有 HTML 元素改变 HTML 样式** JavaScript 有能力对 HTML 事件做出反应**添加和删除

** 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。**

12210
来自专栏云端架构

【云端架构】前端必备常用HTML标签

注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

42060
来自专栏james大数据架构

LinearLayout(线性布局)

要点: android:orientation="vertical"垂直线性布局,"horizontal"水平线性布局 android:gravity="top...

22390
来自专栏HTML5学堂

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂:在前一篇文章当中,我们讲解了SVG的基本知识,并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲...

407170
来自专栏河湾欢儿的专栏

表格案例

13620
来自专栏vue学习

CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度

14330

扫码关注云+社区

领取腾讯云代金券