Skip to content

Instantly share code, notes, and snippets.

@nksm

nksm/button タグで flexbox を利用する.markdown

Last active September 26, 2015 06:32
Show Gist options
  • Save nksm/208f069d23c6a1e9b799 to your computer and use it in GitHub Desktop.
Save nksm/208f069d23c6a1e9b799 to your computer and use it in GitHub Desktop.
Download ZIP
button タグで flexbox を利用する
Raw
button タグで flexbox を利用する.markdown

button タグで flexbox を利用する

button タグで flexbox で中央揃えをしようとした場合、Safari だとレンダリング結果が違う。

A Pen by nakashima akira on CodePen.

License.

Raw
button-タグで-flexbox-を利用する.markdown

button タグで flexbox を利用する

button タグにて flexbox を利用し中央揃えをしようとした場合、Safari だとレンダリング結果が違う。

A Pen by nakashima akira on CodePen.

License.

Raw
index.html
.container
header.header
h1.title button タグで flexbox を利用する
p.description button タグで flexbox を利用し、テキストを中央揃えをしようとした場合、Safari だとレンダリング結果が違う。
section
header
h1 flexbox を利用しない
button.btn button タグにテキスト
div.btn div タグにテキスト
section
header
h1 flexbox を利用する
button.btn.btn--flex button タグにテキスト
div.btn.btn--flex div タグにテキスト
Raw
index.jade
section
header
h1 flexbox は利用しない
button.btn テキスト
div.btn テキスト
section
header
h1 flexbox を利用する
button.btn.btn--flex テキスト
div.btn.btn--flex テキスト
Raw
style.css
@import "compass/css3";
.container {
width: 500px;
margin: auto;
background-color: transparent;
}
.header {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.title {
margin: 10px;
font-weight: bold;
}
.description {
margin: 10px;
line-height: 1.7;
}
section {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
.btn {
width: 300px;
height: 100px;
&--flex {
display: flex;
align-items: center;
justify-content: center;
}
}
button {
-webkit-appearance: none;
border: 0;
}
div {
background-color: #ccc;
}
Raw
style.scss
@import "compass/css3";
section {
margin-bottom: 20px;
}
.btn {
width: 100px;
height: 50px;
&--flex {
display: flex;
align-items: center;
justify-content: center;
}
}
button {
-webkit-appearance: none;
border: 0;
}
div {
background-color: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment