Skip to content

Commit cf8c991

Browse files
committed
Fix flex style after chrome update
1 parent f7c1805 commit cf8c991

File tree

2 files changed

+34
-0
lines changed

2 files changed

+34
-0
lines changed

styling/01-sass.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ $blue: #228be6; // 주석 선언
7777

7878
.Button {
7979
display: inline-flex;
80+
align-items: center;
81+
justify-content: center;
8082
color: white;
8183
font-weight: bold;
8284
outline: none;
@@ -235,6 +237,8 @@ $blue: #228be6;
235237

236238
.Button {
237239
display: inline-flex;
240+
align-items: center;
241+
justify-content: center;
238242
color: white;
239243
font-weight: bold;
240244
outline: none;
@@ -330,6 +334,8 @@ $blue: #228be6;
330334

331335
.Button {
332336
display: inline-flex;
337+
align-items: center;
338+
justify-content: center;
333339
color: white;
334340
font-weight: bold;
335341
outline: none;
@@ -421,6 +427,8 @@ $pink: #f06595;
421427

422428
.Button {
423429
display: inline-flex;
430+
align-items: center;
431+
justify-content: center;
424432
color: white;
425433
font-weight: bold;
426434
outline: none;
@@ -549,6 +557,8 @@ $pink: #f06595;
549557

550558
.Button {
551559
display: inline-flex;
560+
align-items: center;
561+
justify-content: center;
552562
color: white;
553563
font-weight: bold;
554564
outline: none;
@@ -727,6 +737,8 @@ $pink: #f06595;
727737

728738
.Button {
729739
display: inline-flex;
740+
align-items: center;
741+
justify-content: center;
730742
color: white;
731743
font-weight: bold;
732744
outline: none;
@@ -895,6 +907,8 @@ $pink: #f06595;
895907

896908
.Button {
897909
display: inline-flex;
910+
align-items: center;
911+
justify-content: center;
898912
color: white;
899913
font-weight: bold;
900914
outline: none;

styling/03-styled-components.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ import styled from 'styled-components';
220220
const StyledButton = styled.button`
221221
/* 공통 스타일 */
222222
display: inline-flex;
223+
align-items: center;
224+
justify-content: center;
223225
outline: none;
224226
border: none;
225227
border-radius: 4px;
@@ -309,6 +311,8 @@ import { darken, lighten } from 'polished';
309311
const StyledButton = styled.button`
310312
/* 공통 스타일 */
311313
display: inline-flex;
314+
align-items: center;
315+
justify-content: center;
312316
outline: none;
313317
border: none;
314318
border-radius: 4px;
@@ -396,6 +400,8 @@ import { darken, lighten } from 'polished';
396400
const StyledButton = styled.button`
397401
/* 공통 스타일 */
398402
display: inline-flex;
403+
align-items: center;
404+
justify-content: center;
399405
outline: none;
400406
border: none;
401407
border-radius: 4px;
@@ -447,6 +453,8 @@ import { darken, lighten } from 'polished';
447453
const StyledButton = styled.button`
448454
/* 공통 스타일 */
449455
display: inline-flex;
456+
align-items: center;
457+
justify-content: center;
450458
outline: none;
451459
border: none;
452460
border-radius: 4px;
@@ -548,6 +556,8 @@ import { darken, lighten } from 'polished';
548556
const StyledButton = styled.button`
549557
/* 공통 스타일 */
550558
display: inline-flex;
559+
align-items: center;
560+
justify-content: center;
551561
outline: none;
552562
border: none;
553563
border-radius: 4px;
@@ -620,6 +630,8 @@ const colorStyles = css`
620630
const StyledButton = styled.button`
621631
/* 공통 스타일 */
622632
display: inline-flex;
633+
align-items: center;
634+
justify-content: center;
623635
outline: none;
624636
border: none;
625637
border-radius: 4px;
@@ -704,6 +716,8 @@ const sizeStyles = css`
704716
const StyledButton = styled.button`
705717
/* 공통 스타일 */
706718
display: inline-flex;
719+
align-items: center;
720+
justify-content: center;
707721
outline: none;
708722
border: none;
709723
border-radius: 4px;
@@ -863,6 +877,8 @@ const sizeStyles = css`
863877
const StyledButton = styled.button`
864878
/* 공통 스타일 */
865879
display: inline-flex;
880+
align-items: center;
881+
justify-content: center;
866882
outline: none;
867883
border: none;
868884
border-radius: 4px;
@@ -961,6 +977,8 @@ const sizeStyles = css`
961977
const StyledButton = styled.button`
962978
/* 공통 스타일 */
963979
display: inline-flex;
980+
align-items: center;
981+
justify-content: center;
964982
outline: none;
965983
border: none;
966984
border-radius: 4px;
@@ -1147,6 +1165,8 @@ const fullWidthStyle = css`
11471165
const StyledButton = styled.button`
11481166
/* 공통 스타일 */
11491167
display: inline-flex;
1168+
align-items: center;
1169+
justify-content: center;
11501170
outline: none;
11511171
border: none;
11521172
border-radius: 4px;

0 commit comments

Comments
 (0)