teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

css短縮

2016/12/07 02:26

投稿

miyoshi_work
miyoshi_work

スコア69

title CHANGED
File without changes
body CHANGED
@@ -100,24 +100,4 @@
100
100
  width:auto;
101
101
  padding:8px;
102
102
  }
103
- .top_card_list li:last-of-type {
104
- margin-right:0;
105
- }
106
- [class*="top_"] .number{
107
- font-size:18px;
108
- }
109
- .top_card_list .em{
110
- font-weight: bold;
111
- display: block;
112
- margin-bottom: 6px;
113
- }
114
- .top_card_list li {
115
- padding: 16px;
116
- border-radius: 4px;
117
- background: #f9f9f9;
118
- border: 1px solid #ccc;
119
- border-top: 3px solid #0091f0;
120
- margin-right: 24px;
121
- flex: 0 0 205px;
122
- }
123
103
  ```

1

追記

2016/12/07 02:26

投稿

miyoshi_work
miyoshi_work

スコア69

title CHANGED
File without changes
body CHANGED
@@ -66,4 +66,58 @@
66
66
 
67
67
  そもそもalign-contentの考え方が違うのでしょうか?
68
68
 
69
- ご教授頂けますと幸いです。
69
+ ご教授頂けますと幸いです。
70
+
71
+
72
+ ###16/12/07 追記
73
+
74
+
75
+ `align-content: space-between;`って
76
+ 親要素の高さが設定されてないと効かないんですね…
77
+
78
+ 今回の場合親要素の高さは指定できなかったので
79
+ `margin-bottom`での解決で最適解のようでした
80
+
81
+ メモ的にこちらの質問に追記させていただきます
82
+
83
+ ```css
84
+ /* align-content効かせる用 */
85
+ .fl_simple {
86
+ display: -webkit-box;
87
+ display: -moz-box;
88
+ display: -ms-flexbox;
89
+ display: -webkit-flex;
90
+ display: flex;
91
+ }
92
+ .top_card_list{
93
+ text-align: center;
94
+ flex-wrap: wrap;
95
+ justify-content: flex-start;
96
+ align-content: space-between;
97
+ -webkit-align-content: space-between;
98
+ list-style-type: none;
99
+ height:400px;
100
+ width:auto;
101
+ padding:8px;
102
+ }
103
+ .top_card_list li:last-of-type {
104
+ margin-right:0;
105
+ }
106
+ [class*="top_"] .number{
107
+ font-size:18px;
108
+ }
109
+ .top_card_list .em{
110
+ font-weight: bold;
111
+ display: block;
112
+ margin-bottom: 6px;
113
+ }
114
+ .top_card_list li {
115
+ padding: 16px;
116
+ border-radius: 4px;
117
+ background: #f9f9f9;
118
+ border: 1px solid #ccc;
119
+ border-top: 3px solid #0091f0;
120
+ margin-right: 24px;
121
+ flex: 0 0 205px;
122
+ }
123
+ ```