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개
답변을 작성하려면 로그인이 필요합니다.
로그인
혹시 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>