forked from ParryQiu/css-reference
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
132 lines (103 loc) · 6.29 KB
/
Copy pathindex.html
File metadata and controls
132 lines (103 loc) · 6.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
---
layout: single
property_name: justify-content
---
<section id="justify-content" class="property">
<header class="property-header">
<nav class="property-links"><a class="property-collection" href="{{site.url}}/flexbox/">章节: <strong>flexbox</strong> </a><a class="property-links-direct" href="{{site.url}}/property/justify-content/" data-property-name="justify-content" data-tooltip="查看该页面的固定链接">固定链接</a> <a class="property-share" data-tooltip="分享给其他好友" data-property-name="justify-content">分享</a> <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="使用 Can I Use 检查特性支持情况" rel="external">检查特性支持情况</a> <a
target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/justify-content" data-tooltip="Mozilla Developer Network" rel="external">MDN</a></nav>
<h2 class="property-name">
<a href="#justify-content"><span>#</span>justify-content</a>
</h2>
<div class="property-description">
<p>定义了在 flexbox 容器中，元素沿着<strong>主轴（横向轴）</strong>的对齐情况。</p>
</div>
</header>
<style type="text/css">.justify-content { background: hsl(48, 100%, 67%);background: #310736;display: flex;padding: 0; }</style>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-default" data-tooltip="这是属性的默认值">默认属性</code>
<code class="example-value" data-tooltip="点击复制" data-clipboard-text="justify-content: flex-start;">justify-content: flex-start;</code>
</p>
<div class="example-description">
<p>元素朝着主轴（横向轴）的<strong>开始</strong>方向排列。</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div justify-content " id="justify-content-flex-start"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div>
</div>
</aside>
<style type="text/css">#justify-content-flex-start{ justify-content:flex-start;}</style>
</section>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value" data-tooltip="点击复制" data-clipboard-text="justify-content: flex-end;">justify-content: flex-end;</code>
</p>
<div class="example-description">
<p>元素朝着主轴（横向轴）的<strong>末尾</strong>方向排列。</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div justify-content " id="justify-content-flex-end"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div>
</div>
</aside>
<style type="text/css">#justify-content-flex-end{ justify-content:flex-end;}</style>
</section>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value" data-tooltip="点击复制" data-clipboard-text="justify-content: center;">justify-content: center;</code>
</p>
<div class="example-description">
<p>元素朝着主轴（横向轴）的<strong>中间</strong>排列。</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div justify-content " id="justify-content-center"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div>
</div>
</aside>
<style type="text/css">#justify-content-center{ justify-content:center;}</style>
</section>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value" data-tooltip="点击复制" data-clipboard-text="justify-content: space-between;">justify-content: space-between;</code>
</p>
<div class="example-description">
<p>剩余的空间平均分布在元素<strong>之间</strong>。</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div justify-content " id="justify-content-space-between"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div>
</div>
</aside>
<style type="text/css">#justify-content-space-between{ justify-content:space-between;}</style>
</section>
<section class="example">
<header class="example-header">
<p class="example-name">
<code class="example-value" data-tooltip="点击复制" data-clipboard-text="justify-content: space-around;">justify-content: space-around;</code>
</p>
<div class="example-description">
<p>剩余的空间平均分布在元素的<strong>开始和结束</strong>处：在第一个元素的前面和最后一个元素的后面也分配空间。</p>
</div>
</header>
<aside class="example-preview">
<div class="example-browser"><i></i><i></i><i></i></div>
<div class="example-output">
<div class="example-output-div justify-content " id="justify-content-space-around"><p class="block block--alpha"><strong>1.</strong> One</p><p class="block block--beta"><strong>2.</strong> Two</p><p class="block block--pink"><strong>3.</strong> Three</p></div>
</div>
</aside>
<style type="text/css">#justify-content-space-around{ justify-content:space-around;}</style>
</section>
</section>