Flexbox experiment

Developer
Hamza Erbay
Size
4,211 Kb
Views
40,480
  1. Flexbox experiment Previews
  2. Flexbox experiment HTML Codes
  3. Flexbox experiment CSS Codes

How do I make an flexbox experiment?

What is a flexbox experiment? How do you make a flexbox experiment? This script and codes were developed by Hamza Erbay on 18 August 2022, Thursday.

Flexbox experiment Previews
IQ Test

Flexbox experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/Hamzaerbay/less-flexbox-mixin/gh-pages/css/flexbox.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flex-wrapper"> <div class="item item--green fx-grow--2"> <label class="item__label">flex-grow:2</label> <div class="item__spot"></div> <div class="item__facial"> <div class="item__eyes"> <div class="eye__right"></div> <div class="eye__left"></div> </div> <div class="item__mouth"></div> </div> </div> <div class="item item--yellow fx-grow--3"> <label class="item__label">flex-grow:3</label> <div class="item__spot"></div> <div class="item__facial"> <div class="item__eyes"></div> <div class="item__mouth"></div> </div> </div> <div class="item item--red fx-grow--1"> <label class="item__label">flex-grow:1</label> <div class="item__spot"></div> <div class="item__facial"> <div class="item__eyes"> <div class="eye__right"></div> <div class="eye__left"></div> </div> <div class="item__mouth"></div> </div> </div>
</div>
</body>
</html>

Flexbox experiment - Script Codes CSS Codes

.mix_fx-flex { display: flex;
}
.fx { flex: 1; min-width: 1px;
}
.fx-vc { align-items: center; -ms-flex-align: center;
}
.fx-drr { flex-direction: row-reverse;
}
.fx-wrap { flex-wrap: wrap;
}
.fx-df { display: flex; align-items: flex-start; -ms-flex-align: start;
}
/*directional*/
.fx-lt { display: flex; align-items: flex-start; -ms-flex-align: start;
}
.fx-lc { display: flex; align-items: center; -ms-flex-align: center;
}
.fx-lb { display: flex; align-items: flex-end; -ms-flex-align: end;
}
.fx-ct { display: flex; align-items: flex-start; -ms-flex-align: start; justify-content: center; -ms-flex-pack: center;
}
.fx-c { display: flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center;
}
.fx-cb { display: flex; align-items: flex-end; -ms-flex-align: end; justify-content: center; -ms-flex-pack: center;
}
.fx-rt { display: flex; align-items: flex-start; -ms-flex-align: start; justify-content: flex-end; -ms-flex-pack: end;
}
.fx-rc { display: flex; align-items: center; -ms-flex-align: center; justify-content: flex-end; -ms-flex-pack: end;
}
.fx-rb { display: flex; align-items: flex-end; -ms-flex-align: end; justify-content: flex-end; -ms-flex-pack: end;
}
.fx-jsa { display: flex; justify-content: space-around; -ms-flex-pack: justify;
}
.fx-jsb { display: flex; justify-content: space-between; -ms-flex-pack: justify;
}
.fx-dc { display: flex; flex-direction: column;
}
.fx-dc--center { align-items: center; -ms-flex-align: center;
}
.fx-dc--right { align-items: flex-end; -ms-flex-align: end;
}
.fx-str { display: flex; align-items: stretch; -ms-flex-align: stretch;
}
.fx-str > div { height: auto;
}
.fx-str--center { justify-content: center;
}
.fx-str--right { justify-content: flex-end;
}
.fx-grow--1 { flex-grow: 1;
}
.fx-grow--2 { flex-grow: 2;
}
.fx-grow--3 { flex-grow: 3;
}
body { height: 100vh; display: block; display: flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center;
}
.flex-wrapper { width: 800px; display: flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center;
}
.item { display: flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; border: 3px solid #370E39; height: 90px; overflow: hidden; border-radius: 7px; position: relative;
}
.item:before,
.item:after { content: ''; position: absolute; display: block;
}
.item:before { bottom: 10px; z-index: 2; width: 24px; height: 0; left: 6px; border: 1px dashed transparent;
}
.item:after { content: ''; width: 32px; height: 14px; right: 10px; top: 6px; border: 2px dashed rgba(255, 255, 255, 0.4); border-bottom: none; border-left: none; border-radius: 0 4px 0 0;
}
.item__label { position: absolute; font-size: 11px; left: 6px; top: 5px; color: rgba(0, 0, 0, 0.4); z-index: 3;
}
.item__facial { position: relative; z-index: 2; width: 50%; max-width: 120px;
}
.item--yellow { background: #FFE9AB; box-shadow: inset -6px -6px 0px #ffdc78;
}
.item--yellow:before { border-color: #ffdc78;
}
.item--yellow .item__spot,
.item--yellow .item__spot:before,
.item--yellow .item__spot:after { z-index: 1; background: #ffdc78; border-radius: 50%; position: absolute; top: 8px; left: 27px; width: 32px; height: 32px;
}
.item--yellow .item__spot:before { content: ''; top: 16px; left: 1px; width: 16px; height: 16px;
}
.item--yellow .item__spot:after { content: ''; top: 9px; left: 58px; width: 24px; height: 24px;
}
.item--yellow .item__mouth { margin: 16px auto 0; background: #370E39; width: 21px; height: 12px; border-radius: 4px 4px 50% 50%; overflow: hidden; position: relative;
}
.item--yellow .item__mouth:after { content: ""; position: absolute; background: #F26969; left: 45%; bottom: -2px; display: block; width: 12px; height: 7px; border-radius: 50% 50% 0 0;
}
.item--yellow .item__eyes { display: flex; justify-content: space-between; -ms-flex-pack: justify;
}
.item--yellow .item__eyes:before,
.item--yellow .item__eyes:after { content: ''; background: #370E39; display: block; border-radius: 50%; width: 14px; height: 14px;
}
.item--red { background: #F26969; box-shadow: inset -6px -6px 0px #ee3a3a;
}
.item--red:before { border-color: #ee3a3a;
}
.item--red .item__spot,
.item--red .item__spot:before,
.item--red .item__spot:after { z-index: 1; background: #ee3a3a; border-radius: 50%; position: absolute; top: 28px; left: 51px; width: 32px; height: 32px;
}
.item--red .item__spot:before { content: ''; top: 44px; left: 38px; width: 16px; height: 16px;
}
.item--red .item__spot:after { content: ''; top: 3px; left: 87px; width: 24px; height: 24px;
}
.item--red .item__mouth { margin: 10px auto 0; background: #370E39; width: 30px; height: 18px; border-radius: 4px 4px 6px 6px; overflow: hidden; position: relative;
}
.item--red .item__mouth:before { content: ""; background: #fff; width: 100%; height: 10px; display: block; top: -6px; position: absolute; transform: rotate(-6deg);
}
.item--red .item__mouth:after { content: ""; position: absolute; background: #ee3a3a; left: 30%; bottom: -1px; display: block; width: 14px; height: 7px; border-radius: 5px 5px 3px 3px;
}
.item--red .item__eyes { display: flex; justify-content: space-between; -ms-flex-pack: justify;
}
.item--red .item__eyes:before,
.item--red .item__eyes:after { content: ''; background: #370E39; display: block; border-radius: 50%; width: 10px; height: 10px;
}
.item--red .eye__left,
.item--red .eye__right { position: absolute; top: -2px; width: 32px; height: 0; border-radius: 6px; border-top: 6px solid #370E39;
}
.item--red .eye__left { left: -12px; transform: rotate(15deg);
}
.item--red .eye__right { right: -12px; transform: rotate(-15deg);
}
.item--green { background: #51E59F; box-shadow: inset -6px -6px 0px #25de87;
}
.item--green:before { border-color: #25de87;
}
.item--green .item__spot,
.item--green .item__spot:before,
.item--green .item__spot:after { z-index: 1; background: #25de87; border-radius: 50%; position: absolute; top: 18px; left: 54px; width: 32px; height: 32px;
}
.item--green .item__spot:before { content: ''; top: 13px; left: 64px; width: 16px; height: 16px;
}
.item--green .item__spot:after { content: ''; top: 13px; left: 2px; width: 24px; height: 24px;
}
.item--green .item__mouth { margin: 16px auto 0; background: #370E39; width: 21px; height: 12px; border-radius: 50% 50% 5px 5px; overflow: hidden; position: relative;
}
.item--green .item__mouth:after { content: ""; position: absolute; background: #F26969; left: 45%; bottom: -4px; display: block; width: 12px; height: 7px; border-radius: 50% 50% 0 0;
}
.item--green .item__eyes { display: flex; justify-content: space-between; -ms-flex-pack: justify;
}
.item--green .item__eyes:before,
.item--green .item__eyes:after { content: ''; background: #370E39; display: block; border-radius: 50%; width: 12px; height: 12px;
}
.item--green .eye__left,
.item--green .eye__right { position: absolute; top: 0; width: 32px; height: 0; border-radius: 5px; border-top: 6px solid #370E39;
}
.item--green .eye__left { left: -11px; transform: rotate(-15deg);
}
.item--green .eye__right { right: -11px; transform: rotate(15deg);
}
Flexbox experiment - Script Codes
Flexbox experiment - Script Codes
Home Page Home
Developer Hamza Erbay
Username hamzaerbay
Uploaded August 18, 2022
Rating 3
Size 4,211 Kb
Views 40,480
Do you need developer help for Flexbox experiment?

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!

Hamza Erbay (hamzaerbay) Script Codes
Name
Timeline Demo
A Pen by Hamza Erbay
Flexbox mixins with sass
Instagram stories loader
Udemy logo loader
Badge
Twitter Card
Display properties
Square Checkbox
Udemy page transitions
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!