深入理解 CSS3 弹性盒布局模型（6）应用示例

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-2 16:34 | 只看该作者

深入理解 CSS3 弹性盒布局模型（6）应用示例

应用示例下面通过一个示例来具体说明弹性盒布局在实际开发中的应用。该示例是一个博客帖子的典型页面布局。在展示一个博客帖子时，页面上通常包括标题、发表者、日期和时间、评论数量、正文、插图、评论列表等元素。这些元素基本上按照从上到下的顺序依次排列。和中给出了示例的 HTML 和 CSS 代码。预览页面见
清单 9. 博客页面的 HTML 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="post">
  <h1>This is my first blog post</h1>
  <div class="post-meta">
<div class="author">Alex Cheng</div>
<div class="datetime">2014-07-02 10:10 am</div>
<div class="comments-count">2 comments</div>
  </div>
  <div class="post-body">
My first blog post.

  </div>
  <div class="post-image">
<img src="//placehold.it/500x200&text=1">
  </div>
  <div class="post-comments">
<h3>Comments</h3>
<ul>

<li><div class="author">Bob</div><div>This is a good post.</div></li>
<li><div class="autho">David</div><div>Good post.</div></li>

</ul>
  </div>
</div>

清单 10. 博客页面的 CSS 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.post {
  display: flex;
  flex-flow: column wrap;
}
.post-meta {
  display: flex;
  flex-flow: row wrap;
  order: 1;
}
.post-body {
  order: 3;
}
.post-comments {
  order: 4;
}
.comments-count {
  margin-left: auto;
}
.post-image {
  order: 2;
  align-self: center;
}

该示例中主要使用了"order"属性来改变条目的显示位置，以及使用"align-self"来使得图片居中显示。

收藏分享评分

回复引用

订阅 TOP

返回列表