테스트 사이트 - 개발 중인 베타 버전입니다

flex가 사파리에선 안되요..ㅠㅠ 채택완료

예인♥ 4년 전 조회 1,589

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

    Flex Layout    

   
box1
   
box2
   
box3
   
box4
 

 

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

 

 

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

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
세크티
4년 전

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

예인♥
4년 전
이렇게 해주니..크롬과 사파리가 동일하게 보여지는데요~
혹시 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 도 추가요 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

예인♥
4년 전
flex : 1은 해준것과 안해준것의 변화가 없어요..ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인