"Box Özellikleri"
Bootstrap 4.1.1 Snippet by rancor52

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Ders 7</title> </head> <body > <section id="genel"> <div id="birinci"><img src="Resim1.jpg" width="150px"/></div> <div id="ikinci"><img src="Resim2.jpg" width="150px"/></div> <div id="ucuncu"><img src="Resim3.jpg" width="150px"/></div> <div id="dorduncu"><img src="Resim4.jpg" width="150px"/></div> </section> <h1>Sıralama değiştirme </h1> <p>-webkit-box-direction: reverse; Sıralamayı terse çevirir</p> <p>-webkit-box-orient:horizantel; Yatay sırala -webkit-box-flex:1;</p> <p>-webkit-box-align:end; flex olduğunda height ı en uzun olana göre aşağıda sabitler</p> <p>-webkit-box-align:start; flex olduğunda height ı en uzun olana göre yukarda sabitler</p> <p>-webkit-box-align:strenh; flex olduğunda height ı en uzun olana göre hepsi aynı boy sabitler</p> <p>-webkit-box-align:center; flex olduğunda height ı en uzun olana göre merkez sabitler</p> </body> </html>
#genel{ border:2px solid red; display:-webkit-box; -webkit-box-orient:horizantel; -webkit-box-flex:1; -webkit-box-direction: reverse; -webkit-box-align:end; } img{-webkit-box-flex:1;width:100%} #birinci{ border:3px dashed blue; background:red; margin:20px; -webkit-box-ordinal-group:4; -webkit-box-flex:1; width400px; } #ikinci{ border:3px dashed blue; background:red; margin:20px; -webkit-box-ordinal-group:1; -webkit-box-flex:1;} #ucuncu{ border:3px dashed blue; background:red; margin:20px; -webkit-box-ordinal-group:2; -webkit-box-flex:1;} #dorduncu{ border: 3px dashed blue; background:red; margin:20px; -webkit-box-ordinal-group:3; -webkit-box-flex:1; height:400px}

Related: See More


Questions / Comments: