flex가 사파리에선 안되요..ㅠㅠ

flex가 사파리에선 안되요..ㅠㅠ

QA

flex가 사파리에선 안되요..ㅠㅠ

본문

<!DOCTYPE> <-- 이렇게 해도, 없애도.. 안되요..


<html>
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex; width:100%; background:#000;}
    .flex>div{width:100px;height:100px;border:1px solid #ff0000; }
    .box1{background:#ffa;}
    .box2{background:#faa;}
    .box3{background:#afa;}
    .box4{background:#aaf;}
  </style>
</head>
<body>
  <div class="flex">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </div>
</body>
</html>

 

아래는 크롬에서 잘 적용된거구요.

 

2038237746_1634812809.7737.jpg

 

이거는 사파리에서 적용이 안된 모습이에요..ㅠ

2038237746_1634812814.6658.jpg

이 질문에 댓글 쓰기 :

답변 2

display: -webkit-box;추가하세요! 

.flex{display:flex;display: -webkit-box; width:100%; background:#000;}

이렇게 해주니..크롬과 사파리가 동일하게 보여지는데요~
혹시 justify-content:space-between; 도 적용 할 수 있을까요?

.flex{  justify-content:space-between; }
이걸 추가해줘도 변화가 없어요.ㅠㅠ


<!DOCTYPE>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flex Layout</title>
  <style>
    .flex{display:flex; display: -webkit-box; width:100%; background:#000;}
    .flex>div{width:100px;height:100px;border:1px solid #ff0000; }
    .box1{background:#ffa;}
    .box2{background:#faa;}
    .box3{background:#afa;}
    .box4{background:#aaf;}
  </style>
</head>
<body>
  <div class="flex">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </div>
</body>
</html>

div 에서 flex : 1 도 추가요 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,122 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT