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>
아래는 크롬에서 잘 적용된거구요.
이거는 사파리에서 적용이 안된 모습이에요..ㅠ
답변 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 도 추가요
flex : 1은 해준것과 안해준것의 변화가 없어요..ㅠㅠ