Custom Layout with Flexbox

Developer
Harley Santos Garzón
Size
11,982 Kb
Views
26,312
  1. Custom Layout with Flexbox Previews
  2. Custom Layout with Flexbox HTML Codes
  3. Custom Layout with Flexbox CSS Codes
  4. Custom Layout with Flexbox JS Codes

How do I make an custom layout with flexbox?

What is a custom layout with flexbox? How do you make a custom layout with flexbox? This script and codes were developed by Harley Santos Garzón on 15 October 2022, Saturday.

Custom Layout with Flexbox Previews
IQ Test

Custom Layout with Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Layout with Flexbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<main ng-app="aplication"> <header class="fixed"> <div class="row ta-c"> <h3>Select the best layout</h3> </div> <div class="fixed"> <div class="layout-uno"> <input type="radio" name="layouts" value="layout_1" id="layout_1" ng-model="layoutCustom" ng-checked="true"/> <label class="checkbox" for="layout_1">Layout 1</label> </div> <div class="layout-dos"> <input type="radio" name="layouts" value="layout_2" id="layout_2" ng-model="layoutCustom"/> <label class="checkbox" for="layout_2">Layout 2</label> </div> <div class="layout-tres"> <input type="radio" name="layouts" value="layout_3" id="layout_3" ng-model="layoutCustom"/> <label class="checkbox" for="layout_3">Layout 3</label> </div> </div> </header> <main class="container mt80"> <section ng-class="(layoutCustom == null) ? &quot;layout_1&quot; : layoutCustom"> <article class="flex-item"> <h1 class="title">Layout Custom whit Flexbox</h1> </article> <article class="flex-item"> <h2 class="sub_title">flex-item 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, numquam quia tempore deleniti in dolorem debitis, repudiandae, illo quo voluptates quis reprehenderit molestias sapiente earum maxime eligendi voluptatum corporis ea adipisci rerum nulla alias ducimus autem. Atque, officiis dolore asperiores temporibus doloremque magni, provident illo voluptate nisi. Quaerat voluptas culpa, aut, hic, ipsum quam perferendis delectus praesentium iste at vero eligendi cupiditate minima asperiores eius eum odio nihil tenetur illum error quod. Cum ea itaque, impedit quas id. Odit veniam ullam, obcaecati, tenetur nostrum ea perspiciatis vitae blanditiis, maxime repellendus hic minima molestiae. Id perferendis magni, vitae in modi aspernatur repellendus ut nobis at labore reprehenderit iste, ea, perspiciatis cumque deleniti repudiandae quisquam fuga! Consectetur nam tempore doloribus quisquam velit qui amet culpa laboriosam itaque minus enim suscipit vitae dolores molestiae, expedita reiciendis error veniam harum debitis laudantium distinctio . Alias dolorem, reprehenderit, doloremque perspiciatis, atque reiciendis fuga repellat eligendi explicabo non possimus itaque in quas mollitia nostrum nesciunt quis. Fugit id repudiandae esse tempore ab nisi amet a blanditiis, cum eius tempora soluta. Iste fugiat enim officia neque accusamus itaque vero sequi ipsum ut. Dignissimos molestias a, nesciunt nobis delectus, debitis modi veritatis neque, est aliquam perferendis ad eius. Ut! </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex alias nam placeat magnam quis aspernatur natus, ipsam necessitatibus. Cum , fugiat magnam laudantium. Ipsum voluptate quam laudantium corporis tenetur, soluta, neque ab quia, nisi sit natus, minima labore magnam odit placeat quo repellat consequatur dignissimos rerum! Architecto minima praesentium blanditiis, ea in reprehenderit et unde, accusantium facilis pariatur dolore eius vitae corrupti sequi neque optio adipisci natus ipsa aliquid! Et qui minus explicabo similique, obcaecati assumenda natus enim est consequatur alias expedita quis aspernatur eos nihil quae at reiciendis. Dolorum laboriosam quis labore aut quos, voluptatem voluptatibus accusamus qui minus nam? </p> </article> <article class="flex-item"> <h2 class="sub_title">flex-item 3</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum doloribus aperiam quibusdam ipsa consequuntur illum debitis atque autem rem, natus veniam minima aliquam voluptatum voluptatibus, beatae in accusantium, obcaecati culpa. Aspernatur dolorem ullam autem veritatis eaque ea velit perferendis earum , dolorum quis suscipit, distinctio illo nam repellat numquam ! Sapiente, sequi a non commodi! Eaque minus necessitatibus quidem, repellat nesciunt neque, quae consequuntur, corporis fugiat enim illo! Commodi nemo sapiente neque tempore libero, officiis magnam. Non dolorum aperiam, eius eligendi! Sapiente, quas! Beatae velit facilis amet neque atque quisquam inventore praesentium. </p> </article> <article class="flex-item"> <figure><img src="http://unsplash.it/1480/500/?image=961" alt=""/></figure> </article> <article class="flex-item"> <figure><img src="http://unsplash.it/1480/500/?image=983" alt=""/></figure> </article> <article class="flex-item"> <figure><img src="http://unsplash.it/1480/500/?image=972" alt=""/></figure> </article> <article class="flex-item"> <figure><img src="http://unsplash.it/1480/500/?image=1079" alt=""/></figure> </article> <article class="flex-item"> <figure><img src="http://unsplash.it/1480/500/?image=1042" alt=""/></figure> </article> <article class="flex-item"> <h2 class="sub_title">flex item 9</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ducimus dolorum, asperiores tempora saepe quis totam eos illum. Debitis , veritatis ipsum aliquid quibusdam quos, molestiae maxime ducimus sapiente iusto velit quidem doloremque. Est cum maiores, libero, modi animi doloribus quod error, tenetur a possimus sunt quasi obcaecati magni rerum deleniti beatae eveniet voluptatibus aliquid qui asperiores. Sequi ex dolorem id a dolores blanditiis minus ipsum repellendus illum, veniam voluptates provident itaque voluptatem quod at enim adipisci veritatis consequuntur. Deleniti amet ullam officiis earum et doloribus, corporis laudantium! Vitae autem deserunt illum saepe similique aperiam, dolor esse et voluptas totam quasi facere officia quo molestias ut enim provident dicta commodi praesentium harum vero veritatis ad explicabo! Laboriosam esse quo debitis, necessitatibus quam voluptatibus tempore amet ipsam explicabo beatae vitae rem fugiat deserunt eos, id aperiam illum provident asperiores voluptatem ea nesciunt distinctio neque. Fugiat harum rerum maxime, velit deleniti fuga beatae optio obcaecati quidem, enim molestiae, alias et mollitia nihil quos quaerat dignissimos suscipit exercitationem laboriosam! Sequi dolorem, beatae quia quo praesentium natus atque quaerat quas soluta repellat porro unde veniam magnam, accusantium sed! Perferendis unde tempora expedita facilis earum, doloremque recusandae ullam distinctio ab nemo aspernatur illo sint soluta veniam laborum, hic! Officiis reiciendis, repellat, veniam nam amet sapiente minima consectetur dolor maxime ea blanditiis. Aliquam tempore sequi debitis quam totam minus architecto, esse hic aperiam quaerat quo expedita harum fugit quidem minima nulla possimus illum facilis laboriosam eligendi voluptatum a aliquid accusamus deleniti! Dolorum numquam impedit aliquam, asperiores tempora, magnam commodi explicabo quasi alias aperiam dolore quos nulla qui voluptates. Incidunt nam autem optio tempora consectetur minima ullam sit ipsum minus sunt impedit reprehenderit animi blanditiis, in delectus suscipit quas sapiente dolor quam labore, quasi voluptatum totam itaque. Quasi maxime hic sunt dolorum eaque omnis nemo fugiat perferendis consectetur. </p> </article> </section> </main>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Layout with Flexbox - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato);
* { box-sizing: border-box; text-decoration: none; font-weight: normal; font-family: 'Lato'; color: #37474F; -webkit-transition: all 350ms ease; transition: all 350ms ease;
}
* > *, * * { -webkit-transition: all 350ms ease; transition: all 350ms ease;
}
ul li { list-style: none;
}
/*Clase base: A partir de 320px*/
@media all and (min-width: 320px) { /*Grilla tipo Bootstrap */ .base1, .col.base1 { width: 8.33333%; } .base2, .col.base2 { width: 16.66667%; } .base3, .col.base3 { width: 25%; } .base4, .col.base4 { width: 33.33333%; } .base5, .col.base5 { width: 41.66667%; } .base6, .col.base6 { width: 50%; } .base7, .col.base7 { width: 58.33333%; } .base8, .col.base8 { width: 66.66667%; } .base9, .col.base9 { width: 75%; } .base10, .col.base10 { width: 83.33333%; } .base11, .col.base11 { width: 91.66667%; } .base12, .col.base12 { width: 100%; }
}
/*Clase s: A partir de 480px*/
@media all and (min-width: 480px) { /*Grilla tipo Bootstrap */ .s1, .col.s1 { width: 8.33333%; } .s2, .col.s2 { width: 16.66667%; } .s3, .col.s3 { width: 25%; } .s4, .col.s4 { width: 33.33333%; } .s5, .col.s5 { width: 41.66667%; } .s6, .col.s6 { width: 50%; } .s7, .col.s7 { width: 58.33333%; } .s8, .col.s8 { width: 66.66667%; } .s9, .col.s9 { width: 75%; } .s10, .col.s10 { width: 83.33333%; } .s11, .col.s11 { width: 91.66667%; } .s12, .col.s12 { width: 100%; }
}
/*Clase m: A partir de 768px*/
@media all and (min-width: 768px) { /*Grilla tipo Bootstrap */ .m1, .col.m1 { width: 8.33333%; } .m2, .col.m2 { width: 16.66667%; } .m3, .col.m3 { width: 25%; } .m4, .col.m4 { width: 33.33333%; } .m5, .col.m5 { width: 41.66667%; } .m6, .col.m6 { width: 50%; } .m7, .col.m7 { width: 58.33333%; } .m8, .col.m8 { width: 66.66667%; } .m9, .col.m9 { width: 75%; } .m10, .col.m10 { width: 83.33333%; } .m11, .col.m11 { width: 91.66667%; } .m12, .col.m12 { width: 100%; }
}
/*Clase t: A partir de 992px*/
@media all and (min-width: 992px) { /*Grilla tipo Bootstrap */ .t1, .col.t1 { width: 8.33333%; } .t2, .col.t2 { width: 16.66667%; } .t3, .col.t3 { width: 25%; } .t4, .col.t4 { width: 33.33333%; } .t5, .col.t5 { width: 41.66667%; } .t6, .col.t6 { width: 50%; } .t7, .col.t7 { width: 58.33333%; } .t8, .col.t8 { width: 66.66667%; } .t9, .col.t9 { width: 75%; } .t10, .col.t10 { width: 83.33333%; } .t11, .col.t11 { width: 91.66667%; } .t12, .col.t12 { width: 100%; }
}
/*Clase l: A partir de 1200px*/
@media all and (min-width: 1200px) { /*Grilla tipo Bootstrap */ .l1, .col.l1 { width: 8.33333%; } .l2, .col.l2 { width: 16.66667%; } .l3, .col.l3 { width: 25%; } .l4, .col.l4 { width: 33.33333%; } .l5, .col.l5 { width: 41.66667%; } .l6, .col.l6 { width: 50%; } .l7, .col.l7 { width: 58.33333%; } .l8, .col.l8 { width: 66.66667%; } .l9, .col.l9 { width: 75%; } .l10, .col.l10 { width: 83.33333%; } .l11, .col.l11 { width: 91.66667%; } .l12, .col.l12 { width: 100%; }
}
/*Clase xd: A partir de 1300px*/
@media all and (min-width: 1300px) { /*Grilla tipo Bootstrap */ .xd1, .col.xd1 { width: 8.33333%; } .xd2, .col.xd2 { width: 16.66667%; } .xd3, .col.xd3 { width: 25%; } .xd4, .col.xd4 { width: 33.33333%; } .xd5, .col.xd5 { width: 41.66667%; } .xd6, .col.xd6 { width: 50%; } .xd7, .col.xd7 { width: 58.33333%; } .xd8, .col.xd8 { width: 66.66667%; } .xd9, .col.xd9 { width: 75%; } .xd10, .col.xd10 { width: 83.33333%; } .xd11, .col.xd11 { width: 91.66667%; } .xd12, .col.xd12 { width: 100%; }
}
.mt10 { margin-top: 10px;
}
.mt20 { margin-top: 20px;
}
.mt30 { margin-top: 30px;
}
.mt40 { margin-top: 40px;
}
.mt50 { margin-top: 50px;
}
.mt60 { margin-top: 60px;
}
.mt70 { margin-top: 70px;
}
.mt80 { margin-top: 80px;
}
.mt90 { margin-top: 90px;
}
.mt100 { margin-top: 100px;
}
.ta-c { text-align: center;
}
.ta-l { text-align: left;
}
.ta-r { text-align: right;
}
.ta-j { text-align: justify;
}
.col { position: relative; float: left; margin: 0; padding-left: 7.5px; padding-right: 7.5px; min-height: 1px;
}
.col.total, .col.full { float: none; display: table;
}
.col:before, .col:after { content: ""; display: table; clear: both;
}
body { background-color: #ECEFF1; margin: 0; padding: 0;
}
.container { width: 90%; min-width: 768px; max-width: 1280px; margin-left: auto; margin-right: auto;
}
header.fixed { position: fixed; width: 100%; min-height: 40px; background-color: White; z-index: 100; padding: 10px 0; top: 0;
}
header .fixed { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center; -ms-flex-wrap: none; flex-wrap: nowrap;
}
header .fixed .layout-uno, header .fixed .layout-dos, header .fixed .layout-tres, header .fixed .layout-cuatro { width: 50%; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center;
}
header .fixed .layout-uno label, header .fixed .layout-dos label, header .fixed .layout-tres label, header .fixed .layout-cuatro label { text-align: center; background-color: tomato; padding: 0 20px; height: 50px; line-height: 50px; font-size: 1.5rem; color: #ECEFF1;
}
section { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; -moz-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1rem; position: relative;
}
article { position: relative; width: 100%; display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; -moz-justify-content: flex-start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 10px; margin: 1rem 0;
}
article:first-child { margin-top: 0;
}
select { min-width: 250px; padding: 10px; color: #37474F;
}
select option { color: #37474F;
}
img { max-width: 100%;
}
figure { margin: 0;
}
input { /* Input Submit ============================================================ */ /* Input Checkbox ============================================================ */ /* CUSTOM CSS CHECKBOXES */
}
input[type='submit'] { border-bottom: 4px solid gray; color: white; text-transform: uppercase;
}
input[type='submit'].sel, input[type='submit']:focus { color: #37474F; border-bottom: 1px solid green;
}
input[type="checkbox"], input[type="radio"] { /* Remove default checkbox */
}
input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked, input[type="radio"]:not(:checked), input[type="radio"]:checked { display: none;
}
input[type="checkbox"] + label, input[type="radio"] + label { padding: 0 1rem;
}
input[type="checkbox"] + label.checkbox, input[type="radio"] + label.checkbox { position: relative; padding-left: 2rem; cursor: pointer; display: inline-block; height: 1.5rem; line-height: 1.5rem; font-size: 1rem; /* checkbox aspect */
}
input[type="checkbox"] + label.checkbox:before
, input[type="checkbox"] + label.checkbox + label:after, input[type="radio"] + label.checkbox:before
, input[type="radio"] + label.checkbox + label:after { content: ''; position: absolute; top: .25rem; left: .25rem; width: 18px; height: 18px; z-index: 0; border: 2px solid transparent; border-radius: 1px;
}
input[type="checkbox"]:not(:checked):disabled + label.checkbox:before, input[type="radio"]:not(:checked):disabled + label.checkbox:before { border: none; background-color: gray;
}
input[type="checkbox"]:checked + label.checkbox:before, input[type="radio"]:checked + label.checkbox:before { top: -1px; left: -1px; width: 10px; height: 18px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid white; border-bottom: 2px solid white; -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;
}
input[type="checkbox"]:checked:disabled + label.checkbox:before, input[type="radio"]:checked:disabled + label.checkbox:before { border-right: 2px solid white; border-bottom: 2px solid white;
}
.layout_1 .flex-item:nth-child(1) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_1 .flex-item:nth-child(2) { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.layout_1 .flex-item:nth-child(2) p { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Firefox */ column-rule: 1px solid rgba(255, 255, 255, 0.1);
}
.layout_1 .flex-item:nth-child(3) { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_1 .flex-item:nth-child(4) { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; margin: 1rem 0;
}
.layout_1 .flex-item:nth-child(5) { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; -webkit-box-flex: 0; -ms-flex: 0 1 33.3%; flex: 0 1 33.3%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.layout_1 .flex-item:nth-child(6) { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; -webkit-box-flex: 0; -ms-flex: 0 1 33.3%; flex: 0 1 33.3%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.layout_1 .flex-item:nth-child(7) { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; -webkit-box-flex: 0; -ms-flex: 0 1 33.3%; flex: 0 1 33.3%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.layout_1 .flex-item:nth-child(8) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_1 .flex-item:nth-child(9) { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_1 .flex-item:nth-child(9) p { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Firefox */ column-rule: 1px solid rgba(255, 255, 255, 0.1);
}
.layout_2 .flex-item:nth-child(1) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_2 .flex-item:nth-child(1) .title { position: absolute; z-index: 2; top: 50px; left: 1rem; font-size: 4rem;
}
.layout_2 .flex-item:nth-child(2) { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
.layout_2 .flex-item:nth-child(2) p { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Firefox */ column-rule: 1px solid rgba(255, 255, 255, 0.1);
}
.layout_2 .flex-item:nth-child(3) { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_2 .flex-item:nth-child(4) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto; position: relative; z-index: 1; opacity: 0.5;
}
.layout_2 .flex-item:nth-child(5) { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; height: 250px; margin-top: 2rem;
}
.layout_2 .flex-item:nth-child(6) { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; -webkit-box-flex: 0; -ms-flex: 0 1 33.3%; flex: 0 1 33.3%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_2 .flex-item:nth-child(7) { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; -webkit-box-flex: 0; -ms-flex: 0 1 33.3%; flex: 0 1 33.3%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_2 .flex-item:nth-child(8) { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; -webkit-box-flex: 0; -ms-flex: 0 1 33.3%; flex: 0 1 33.3%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_2 .flex-item:nth-child(4)
, .layout_2 .flex-item:nth-child(5)
, .layout_2 .flex-item:nth-child(6)
, .layout_2 .flex-item:nth-child(7)
, .layout_2 .flex-item:nth-child(8) { overflow: hidden;
}
.layout_2 .flex-item:nth-child(9) { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;
}
.layout_2 .flex-item:nth-child(9) p { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; -webkit-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid rgba(255, 255, 255, 0.1); /* Firefox */ column-rule: 1px solid rgba(255, 255, 255, 0.1);
}

Custom Layout with Flexbox - Script Codes JS Codes

var app = angular.module('aplication',[]);
app.controller('layout', ['$scope', function($scope){
}]);
Custom Layout with Flexbox - Script Codes
Custom Layout with Flexbox - Script Codes
Home Page Home
Developer Harley Santos Garzón
Username HarleySG
Uploaded October 15, 2022
Rating 3
Size 11,982 Kb
Views 26,312
Do you need developer help for Custom Layout with Flexbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Harley Santos Garzón (HarleySG) Script Codes
Name
Dinamic Menu with Angularjs
Snow machine
Angular-deckgrid - Like Pinterest Layout
Custom Controls like Youtube for HTML5 Videos
Vertical Timeline
SVG loading infinite
Gallery Custom Javascript - Jquery
Hangman
Dinamic Filter - Angularjs
Plantilla de estudio - Pug - Sass
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!