I am working on a simple code editor application and I stumbled upon a visual bug, basically the textarea is a little bit taller than the container.
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have tried everything but cannot find a solution, searched around Stackoverflow but could not find an answer I thought it was caused by the resize, border and outline, but appearently those are not the problem.
Add box-sizing: border-box; to your textarea styles
Related
Im trying to make the 'rating-block' to be positioned at the bottom-right side of 'card'. But these values don't work as its container has justify-content centre so it will force it in the centre. Is there a better way to position it to the bottom right?
.card {
width: 210px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
position: relative
}
.card-img {
display: flex;
width: 50%;
}
.rating-block {
background-color: white;
border-radius: 10px;
position: absolute;
padding: 0 10px;
top: 100px;
}
.rating {
margin: 0px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="card">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
<div class="rating-block">
<p class="rating">4.5</p>
</div>
</div>
</body>
</html>
Try adding top: 185px; and left: 115px; to the .rating-block class
.card {
width: 210px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
position: relative
}
.card-img {
display: flex;
width: 50%;
}
.rating-block {
background-color: white;
border-radius: 10px;
position: absolute;
padding: 0 10px;
top: 185px;
left: 115px;
}
.rating {
margin: 0px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="card">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
<div class="rating-block">
<p class="rating">4.5</p>
</div>
</div>
</body>
</html>
Just adding a suggestion for css variables here as if you change the size of your div, it will automatically position the pill. Also consider using ::before as this cuts out a bit of markup too.
.card {
--card-width: 210px;
--card-height: 250px;
--image-scale: 0.5;
width: var(--card-width);
height: var(--card-height);
display: flex;
background-color: green;
position: relative;
align-items: center;
justify-content: center;
}
.card-img {
display: flex;
width: calc(100% * var(--image-scale));
}
.card::before {
content: attr(data-rating);
background-color: white;
border-radius: 10px;
position: absolute;
padding: 0 10px;
transform: translate(calc(0.5 * var(--card-width) * var(--image-scale)), calc(0.5 * var(--card-height) * var(--image-scale) + 1rem));
}
<div class="card" data-rating="4.5">
<img src="https://m.media-amazon.com/images/I/41rsAHrKw1L._AC_SY580_.jpg" alt="card-1" class="card-img">
</div>
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
width: 1170px;
margin: auto;
}
.logo img {
width: 84px;
float: left;
padding-left: 5%;
padding-top: 2%;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>LoLstudy</title> <link rel="stylesheet" href="fstyle.css" /> </head> <body> <div class="container"> <div class="left"></div>
here is the html code.
what shoud i do?
You can change position: absolute on the .appbar class to position: fixed or just remove the position property depending on the layout you want.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
position: relative;
}
.appbar {
width: 100%;
height: 60px;
display: flex;
position: absolute;
align-items: center;
top: 0;
z-index: 999;
padding: 0 2rem;
}
.logo {
font-size: 20px;
}
.fragment {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.left {
background-color: cadetblue;
}
.right {
background-color: burlywood;
}
<div class="container">
<header class="appbar">
<a class="logo" href="#">LOGO</a>
</header>
<div class="fragment left">
<h2>Left</h2>
</div>
<div class="fragment right">
<h2>Right</h2>
</div>
</div>
I'm trying to make a layout design for my webpage, but it's a little complex to build that design responsive.
I have hidden the sidebar using media query but still struggling with flex-order.
in desktop, it looks like this, and I have achieved this design using flexbox
but I'm trying in mobo device it should look like this
How should I add a media query to rearrange items. I'm new to flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 100%;
margin: 0;
}
.conatiner{
display: flex;
}
.sidebar{
max-width: 30%;
width: 100%;
height: 100vh;
background-color: blue;
}
.main{
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper-1{
display: flex;
}
.item-1{
background-color: blanchedalmond;
width: 70%;
height: 200px;
}
.item-2{
background-color: chartreuse;
width: 30%;
height: 200px;
}
.item-3{
background-color: darkcyan;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</body>
</html>
i tweeked a little bit your code and it is probably solve yor problem
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 100%;
margin: 0;
}
.conatiner {
display: flex;
height: 100vh;
}
.sidebar {
max-width: 30%;
width: 100%;
background-color: blue;
}
.main {
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper-1 {
display: flex;
flex-wrap: wrap;
}
.item-1 {
background-color: blanchedalmond;
width: 70%;
height: 200px;
flex: 0 0 50%;
}
.item-2 {
background-color: chartreuse;
width: 30%;
height: 200px;
flex: 0 0 50%;
}
.item-3 {
background-color: darkcyan;
width: 100%;
height: 300px;
flex: 1;
}
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
.wrapper-1 {
flex-direction: column;
}
.item-1 {
order: 1;
flex: 0 0 200px;
}
.item-2 {
order: 3;
flex: 0 0 200px;
}
.item-3 {
order: 2;
flex: 0 0 300px;
}
.item-1, .item-2, .item-3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Why this sliding is not working I couldn't understand., when I click on div(nex) it translateX(-100%) with Javascript,
but when I use this property transform:translateX(-100%) in CSS it works.
I am not getting why this is not working
Please give a proper explanation in detail and let me know how you do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.holder {
position: relative;
}
img {
min-width: 100%;
height: 500px;
}
.slider {
width: 80%;
margin: 20px auto;
display: inline-flex;
overflow: hidden;
position: relative;
}
h1 {
color: white;
}
.pre {
position: absolute;
height: 100%;
display: flex;
align-items: center;
}
.nex {
position: absolute;
right: 0;
height: 100%;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styler.css">
<title>Document</title>
</head>
<body>
<div class="slider">
<img id="images" src="https://www.howtogeek.com/wp-content/uploads/2019/12/GG-Banner.jpg?height=200p&trim=2,2,2,2" alt="">
<img id="images" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUVFRgVFRUYGRgYGRgZGBgaGBgYGRgYGBgZGRgYGBgdIS4lHB4rIRgYJjgmKy80NTU1GiQ7QDszPy40NTEBDAwMEA8QHxISHzcrJSs1OjQ0NDE0NDQ2NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NTQ0NDQ0NDY0NDQ0NDQ0NDQxNP/AABEIAKIBNwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAIFBgABB//EAEkQAAIBAgMEBAoIAwcCBwEAAAECAAMRBBIhBTFBUSJhcZETMlJTgZKhsdHSBkJicoKyweEUI0MVJDNzk6LwY4MHNLPC0/HyFv/EABoBAAIDAQEAAAAAAAAAAAAAAAABAgMFBAb/xAAuEQACAgEEAQMDAwMFAAAAAAAAAQIRAwQSITFRBRNBYXGhIlLBI9HxFDKRseH/2gAMAwEAAhEDEQA/APmaQqwSwyy4iwiQywKQ6xkQiwyiCSGWAgqCFQSCCMIsAPcAP7x/2m/Ok0NMShwY/vA/ym/Okv6cQxmmI3TSL0Uj9JY7A5KcOiQlNIYJCwBqkKqR7DYDMtybeiQxGGyNa9+MFJN0FPsXVIVUk1STVJIRBUiWM2LRqtmZMr2sKqFqdQDlnQhrdRNuqWgWewoVmffC42kL0qiYgcBWGSoOsOgCueoqv3p7gtpUM4GIzpWvZVxICC/KiR/Lb8BJ5y/kK9FHUo6q6MLMrAMpHIqdDI7fAbgvont+qUn9hmnrhaz0f+mf5tA9XgnN0H3GWQq7XxFFScRhmcD6+HJqIetkIDpz0DgczFQF49PNoSLHQjfftlJiKS0ny0jnYb6I6QHY39PsbTlaEwVcYlc4rIybilFtAfJd/Hv1dHslhTpqgCooVeQFhGBV08c7EqKLhl3qz0wwHOxbUdY0kjWfzDevT+aPYnCq9swuRqpBsynmrDURCq70SA7ZlbxSB0/xINW+8o9AjVCPDWfzDevT+aCao5/oN69P5oelj0bUByp3EUqpB7CE1hP4xB9Wp/o1vkiArn8J5lvXT5oCoX8y3rp80tWxyeTU/wBGr8kVq4pOVT/Sq/JCxlU7uP6TesnzQT1H803rJ8ZZVsUh4P8A6VX5Ym9ceS/+nU+WAigVwl0cFMpsL2tY6qMw03ED0TytQVtba8CND6CI5jnGcMQwDDKxZHUXGq6sANxbui/8LbVDl7NUP4fhaNkjP7TpstVQTfoPbSx8ZN/CKusf2oWNZAwHiPqDcHpJ6RE6gghirzp64nQoBJIZZXqx5wiseZgkDkWKwyysVjzPfJhzzPfJbSDkWyCFWVKueZ74RXPM98Ngbi6QRqmJQo55nvMYR28o95jWJ+Rby5w3/mR/lN/6iS+oC5mJp1GFUHMfEbifKWX2AxL28c+nX3w9p8j3qzVURHaSyiw2MfqPo+Es6GLPFR3ytxaJKSZaIIdBEUxQ4qffEqm0nq3FBglNTleuwzHNxSkn1m690ozZo4o3J0WQg5cI1Z2jRoU1atVRAb2zMATqfFXefRKnFfSXD1CGp+EcWtdKNUjvyypwoo0zmSmXc+NVqnO5Pb9X0Wlgu2anJO4/GY8/U5qVwj/yzqWlbXJy7fpjxqWIQc2oOB7AZY4DaNGsL0nV7bwDZh2qdR6RB4bbYJs65ftDUekb4bH7Io4izsLPvSqhyuvIhxv7DcRQ9anGVZI8fQhPTpfQYnSiq7TqYVlp4lXqBjanWRQS48l0vo46t/fLTAbQpVlLU3DW0I3Mp5Mp1U9om7gzwzRUoO0ckouLpjM6egQipLbIpAp0KyQtTBkLmvwBt2xbkPaymx2xqFVs7LlqWsKqE06oHLOhDEdRuOqKiljKPiOmKTyalqVa3U6DIx6iq9bS5nQcUKyiobdVn8HVLYVibBHUK9T7lRv5bdilj1iXdCkiXyrYnexuWb7zHU+kzzEUEdSjoro2hVlDKR1qdDKh9hFB/da70OSG1Wju0tTfVR1KyjqMVMdj2LoIl6iOKZJ1v4jn7Saa9Yse3dFV2rqFek4Y7vFCt9wuVJ7CAeqKJialA5sRh2a39ekWxAt1pbwidiqyjnGaeOpYhD4ILWTcxBGQHkxPHsBIjVAEbGHzVT/Z88C+IY/0n/2fPF3erT0R1cX1QKzunUHLC/47dvCetXq8j6if/JDaKwb4i++m59T54J8SeFJ/Tk+eBq4qoCQF71X54MYupxHci/PHtCwO0qjshtTe4sy+JvU38r0emVWRG1QlSRe2699blDoe0d8u3ZzqL+qnzyqdGUFXUFQxy5gBpvFjcqLXtqRugMz+1FYVkDW8R9Rx6ScOHtidQRj6Q6VKdi3iPv4dJNzcR6TKd3PM98lGNqwk6DVBOiTMeZ750e0W4Grr1QiuvV3RJZNZBRJtj61F5juhVqJzHdK9ZMSW1FbZZLVTmO6GSqnMd0qxCrHsQbmXCVk5ju/aNU66cx3ftKSnDpJLGiLm0WS1qfh1N1t4NuHHOnVL/CNSIHiewTGX/mD7jfmEucC+gi9vvke/6GsoJTPk+t+8eWmgF/cZlziQiM53KCe4bo9gNlVayI9TEOgdVbJTCplDC4Bc3Ymx6pxarUQ06uTfPRfig59INtjGlQtJDZ6lwD5CAdNz7h1nqngxlJFVPCIqoLKpdRYcTv3k6k8THKP0awwN2p5zzqO7n/cSJY0dkYdfFoUR2U0H6Tzuq12PK754NDFDYiiG1KHnqfrL8Y1RxdNvFqI3Y6n3GXQ2VQO+hSP/AG0+Eg2wcI2/DUfRTUe4Tl9/F4f4Lt0ivj+zMeabWJ6B3jl9oTK4Oi2GRaupw7u4ceYbwjqrD7BAUHke2XQN9R3yeXGvuhpqapmq2pgExFJqbG17FWG9HGqup5gzHYjabIy1WQDE4clMRbQVaZsCSRqbdFweV+AE1Ow8VmTId6butf23d0o/pRhgmJSqRdaqFHHAsnA9bIWH4Zf6TneLP7Uun/2cGohw/KLPBbcVhcoR2MD+glnS2gh8odo+Ey2xceETwLorNSZqZY2uwU9Bt3FcstmxiEWVAGOgnrppVur8nDFu6stzi6e7OB26e+WmIt4I8so/SZ/F4OkqBXcK7DS5sC1r2udL9W+T2xtnDU8IorVCodVToqznMACQcoOXtawnLuTasv2v45CzplkXDjxa7r+E/pDrVIF0xLOBvBDCw7WJnZOCjFyb/BzQk5yUUvyaO060+b/SDGByVZs1+bH2C+kq8FtjE4YH+HqkrbxH/mJ2oGN1PUDYzg/1UU6aaNaPpk5RuMk34T5PruUzN/TXZtMYeviMgSvTpsVqLdH01AZlsWX7LXHVM9sn6d1xURq7U3oFgHy08jKG0zXzfVNiRyvNX/4iYgfwuJXKxzUTZgpK6rp0hpLYZFO9pyZtPLA0p/I01O2gFgNwAsB2CAqJKg7Mw3mKP+mnwi21NnYYUapFGkCKb2IRL3yG1tJa0yikW1alcaj2SrdCNLQ52dhvMUfUT4QT7Pw3maXqJ8I1YqRBKbHcSJzUByueZlfjHwKNkdaCt5ORL68wBpItg8OwDLTpEHUEIhBHMG0hdgkil+ktNUrUybAFKnD7VPfzlPUqpzHdGvpJQRKtPIqrdXvlULfpLvtKepLYRtcilKgr1E5junRNp7HtFuYiIRYMSayCJsIsIIJYRZJEGFWFWBWFWTQmMU4ZYuhhkMmiD6O/qD7h/MsscK9jaVv9Qfcb8yxtTCPyN/BZVE8M9OhwqOM/3E6TT6AigAAbhuExf0Rpl6z1D9Rci9p1b07ptUnj/WM2/O4rpcGrpY7YL6hVjCwCQ6zFZ1BUkma2vLXukUi21auSmx6j7rn2CKK3SSGJbGUNgkzAENTYkHUENc698zn0YJFPKfqlh6rsPhNDhGy4SgvE007goMz2xNHqryq1R3sGHvmhDqf3sI9o0ezq2Sop4Xsew6fv6JafSvCeEwz28ZB4ROYZOlp1lcw9MoprcHUD01J1zLZus7m/WUTbhOM18FeZdM+ftiV8MWU+NSoFuRfwY3fhyx2jjLOnUQfaPhM8tHwbunFHdPUOUe6DxDlWVxw9nIz3sFv06kvlWYlqOWmX3/iLtZgRSAXI6rWR9S2dH1AHAZeP2pQ7c2ktTCqFFmzF313sVtfq0URXbYFUeEGYOoGY5SQyrz7ATu+Fq04S/RB0tZmNzpe9hw9Mzsj2ys9FooRyY1Xa/k0uD2klRioDAgBukALqdARrpu3Gxmh2VicuigM1iVFg12uvA7+jeZz6NbOeoj1Fy2ZyASTqEAXgOeaJ1MUW8ViLM1iDyJFwfROvPqf6MXPtvmjOwaD3M+SGLpKk2fR2xGItf+GUHmcgGvVaYH6RsPDjoIjZOmqBQM2Zt4XS9ssQerUYWaq5HIsSO46QSUwN04c2qxyg4xXZp6H0nPizLJOSpfUVtlcj6r304X4j07++WX8YzYSvSd2JppkBJJJpkdDuF1/DEdoL0CfJIbuOvsvJLiSquBr4fD1KXawGZPTdWH4otJmcWn5TT/gv9U0yyY2l2mmv7GpTCh6bOpYte6Mcy5xlVspXcBfMtwL6X36yrxJdqVTLqoRjfo3KlCyk9djr1gy3d2p0hTRSz5SWCjNkUk6m2+w0A3mxtKuoxRGp00ZyUurpkscy9EsWYajd2Adk1nJxRlavDBYkkuVVv5CmnW8n8kg1OpxFhrrZDbTTS442hUZ2vloVOvpUgPzwWIzqpZqNQKoJY56egAJJsKsjLNKukZqxwXyynNdkQoKrZWzZwEIUkkA9MrZiczHqy79QIphXJqZUv0tSOG48Dpy7jGij1gURajlR0gzoQoI6NibG9wdL7lG/WL7PwzmoGRS1lVmsVBAObSzsN+vZOKMpb0yGSOK17bbsBtZWFRcwt0Wtu8peURqSy26G8ImZWXova5U36S+SxlY00IO1YSVcAWnsi09jARk1nvgT1SS0T1Si0WtM4Qqzlonqk1oHqk1JEZJnKYZTPFw7dUIuHbqj3IVMkhhlniYVurvh0wrdXf8AtJqS8kKfgAD/ADB9xvzLGs9gTyF5BMKxqgXHiMePlL1RnE4IhQM2ruiAAeU2uvZeQlljGMnZJQcmkar6JUclEX8ZrOed3ufcQPRNIkzSRhXI3EzxeaDnNyvs24xrg0awytzmcWo3lHvMkDOd4PqSUTQNi0X61+oaym23ii1Oo24LTcgdiE98ipi+1BehVHNGHepEnixRjJMdUhqlfKoPBVHYAN0psAbYisP+pf1qay7lDRNsVW+9SbvWx90th1L7fyhv4L6aDYFW6FfJPsb9wZn5Y7Fq5agHBgR6d493tnPljcWLIriVO0KCLi8QGVTco4uAdHQA7/tKYRco0CjuEJ9J0y4tG4PRt+JHJ9ziJhp6z0ye7Sx+ioyMySkE/hUPD2mV/wD/ADOGJ3PbyQ7BewAbh1CPB5IPOxwi+0KOSUP9ra+w3hkRFVEUKq6BRoAJ852eLIoO8Zge0MbzfLUmHr08tWrT3WdmX7rnMpHrEeiceuhcE/DNf0bIlmafbRODeqq6E68gCT22HCJ1MayXDJu0zDd224SdDDMek7MCxvlBItyuRqTM54tquX+T0Hvbntgufm/gYrAMrDmpHeJWqM9NKYNmZ0CnU9IkLuGvE7pZOMqnfu4kn3y++iGxaa00xBFY1GBKEICiAkgFAQdSPrdek6dLBST8WZ/qWdYo2+2mjQ4JqSJezAMST0WFyeLi5bqszG1raQuHNBQwQAAsWYKrWLG1+HVw0gxXIUi+IJ3C6L3k5bc4t4YqLZq5NhZSqjv6Ok1Gl8Hm51Vp9jFU0t4NhysQPdFsTXpWKnW4IPRJ39okWqsNS1cta18gsOwFdIEYgnxjV9RPliop4EWxSJ4gVV5BLC/PTeYph66K5yKoLeMQtidSSTYaxurS32er1dBPabA8Il4Iqcxd+qyjjpy64iDXKpFN9J3BqU9fqv8AmWUjmXO3znqoAWJCP4wA+su6wlU+HbqlsGlEJxbYqxnkI1BuqdJ7kKmDE9EiJOcx0hUMIpgUMIpjIsOphVMAphFMCI0jRlGiSNGEaNDCUj/PH+W351jR6VemvBAzn8q+0mJUD/OH+W351hlzCswDFS6DIwCnxL5kFwRfUH0Tm1LaxOi3Cv1I0KGDbadFTYupPJbse5bmU5pBvGLN94kj1fF9kZpAAWAAHIC0wGoo0U2Pf2wvCnVPXkt+YiNUdoK2uV1+8B+hMrVMIpkJU+kSVlkdpou8N6EZvcDB1dpU3UorG7C1irKevxgIoDCK0hx4HyXqPmAI4zP1TbF1OtEbuJEJTxjUiWNyh8Yb8v2h9nmPTzgcTUDYkMPrU2HaAykfrJQjV/Vf+hJ9GjkqblWDDeCD3G8Dh3uoPV7tISUEx76ZU7rQrD6tTKT9mqtr96rKaaDHUvDYF1HjKhK/epnMv5R3zHHbFPRVJdyAciDMwuL2bgn4iJteiZP6csb+GZWojTLG8FiMQtNczsqLzYhR7Yqvhn/xCtBOSGnVqt2EtlQ+hpa4HCYekwdKeZ/O1alOpU/Dmey/hsOqbTk/g5qRXrWrVBejQbL5yrejT7QGGdvVA65R7a2ZXUfxLtny2V8qBFVL6FRmLMASbk30PVN1/FodWBY82eke4Z7D0ATOfTLGNkRUOWkxK1iGRmsbZVurEhDqCewcZCb/AEuzo0smsy2unfyZLDp4Rs58UHT7Tc+wSwgTmA6IUrbQDTTqO73SD4oW039YtbnfrmNJSyy4/wAHsYOOOP6nz39zysjVGWkgu7sEX7zadwFyeyfUMNRekiU1Tooiouo3KABfpdUxn0KoojHE1BfQrS6SCwOjuQzA3O4dV+c09XaqvzC8s6Ant6eg6t/66mHHsjSPL+o6n3stLpBHxLsSEQaaZtLDnbpan/nVIWcDRO0ki5PMnNBnaSDcNB9qnu9eQfayHcD69P55cZxJnfyPd80GQ2/IO8fNAf2mN9v91P55F9qDl/vp/PCmASpUYb0Hs+Mr8S5YjogbzwG4W58yJz44H/8ASfPFHxa5uweUnE6/W6hCgKXbrHwyXFrI/wCZOuVrmPbaqhqqW4I/FT9ZORMr3McehgXM6RczowFRPRPJwlZNhFMKpgBCoYwYZTCKYBTCqYyLDKYdGiwMIrQAPh2/nD/Lb86x7EUs66GzA5kbkw3GVuGb+aPuN+dZaK8i0mmmSQt/aa/Wur3IZACSGG+1uBk1xzHxaTntAUe2RwP+GjHxnLOT943HstGVaYOTYpNJGjHc1yyC4msf6QHa4/SEWrX8hPXPwk1aFVpS5L9q/JNL6gfD4jzaH8fxnq4uvxw/c6xkNJgyG5ftX5/uNJ+RcY6pxoN6ymBwNN/CqcjKihsoYjo5vqix1F93KWAaTDQ9yk0l39w2+WWmz30I5G/f/wDUcBlTgHs1uYPx/SWQac9FiNF9HnurqeBB9DCx/LKPYOFsjJmstOpUSyixJV2HSbstuseuPbBrWqEeUp7xY/GLUq2TE4pMjHprUGUD+oik7yOIM7fS5bdS4+UcOqjwyzp0gvii3PmesneT2wg04xI40j+m/cvzSJ2iPIfuX5p6SjPHKgJ3Gx/5vEratMm4YXve4IuCDvBHEQ5xn2H7l+aBxG0MoLeDqG3ABfjBDM5tD6KfWoMaXNCM6egb19GnVKzDfRWqag/iMuTxiEYlqp8gAgFRzJ4ceI0NbbDPdVVywtcKAFW/lMDcm31b3PVvnU6qoS+SpnO9zkzG3C2bRfs/rcytRhdpGgsmpUNt8eO6LZKVgC1gFAyoPFQDdbmevhwtxC7xMbZDHL4NweBIWx/3aHqnNij5D9y/GWHBJNOmMM0WdtZFsSfIfuX4wZqk6ZH7l+MCJIPIO8g5Pkv3L80Uq12GhR/Z8YDDO8SFTVj1+4Ae+89fEHyG9nxiiVjlBytrrw+sb8+uIZU7db+an3H/ADJK12jm2nvUTQjovvt5SyvYxxGQYzpBzOkgBCeiRkpWTPRJqYMSQjAOpk1MCphAYyIZTCAwAMmDAiGwx/m/gP5ljmMqZUcjfaw7W0Hvlfhj/N/AfzLGsQ12RObgnsTpH3CVzdRbLIK2kOEZQqjcqqvcJJWgqj9Iz1GmDJGih7D083UI9Sw67gCSe39ItS0AEf8A4jwVFqg8djkp/ebQH3n8MrafSCUqVnjmkjZGuzjeiLncfe1Cr6TB1a4BsMO5J3AugbtyrcieYDClVCZutsuhYneWfeT2WlhTUJoFAHE/qec08fp0K/U22cctVK+Cqo1gz5HRqbkEqCQytbeAdNeqTvbSNbaw/hKd08emQ6EcWXUr13Fx22ijVA6pUXc4B9JH/O6cWr0ywtbemdOHM5rnsLRqWYHrltmlEGlrRqXUHqnG0dCZZbPq5aiH7QHfp+sntFP76wuwz0EbRityjspvbfoRK5Xsb8te6P7cqZcRQfykqp+Rx7jLdG9mqi/No5tSriDrYYA+M9vvt8YF0VRcu/rt8YZ69+EBWZbXe3dffwA4nqE9QmZggazXJDuOrO27vg6mPYqTmfKNSc7ktbgoJ9vdC4jBFhmtYeRv9LfL74FqZyObHQcuvX2CStAuxfC02CArmS/SZQ7gXbU6X39cZoqHuc734gu9/fJM4tYbvfAMg3roeqUtp9mtFSXXQWphFP1n9dvjC4U/UZnvwOdtRyOu+LrWbj3/APD+kHiK9ukDYgggxxdcFeaClFuuS0NIeU/rt8YR6I8t/Xb4ytoY0kgNbW9iONuqGOJtpvEkzgcXF0whpDyn9dvjBPRHlP67fGQfFchB1MQT1RCFcWllazNuNuk2/hBtSFrZm5eMZ7iW3Dmw9nS/9sg7wAotsraomp8Vt5J+ssQYx7bT3dPut71lcTHHoZBjPZFjPIDICSE0g2bR82nqiSGzaPmk9USreSozU9mlGzKHmk9USY2XQ80nqiG8dGZUwqmaCps2jcAUU1OpyiFGyqHmk9UR7xUZwGTBmiGysP5pPVEkdlYe2lFPVEN/0FRncO4FS5Nugd/3ljNJw9UEbkRjci2rEDT0Ay6o7MogX8CgPGyiUWKxdKnWqhbAdBQFGmi3bd1mUZpSlFpIsxqpK+hjNxjGFN27BKn+0afleyTTaiA3DewzPeKXg6dy8miV4fa5bNRpoASis5BNtdFBvbmWlEm2qPlHuMs9nYiliqjsVDhERbMOJLkkAwxYZ+4m10RyyuPDGUqV/IT1z8sJ4XEH6ieuflji7NoeaT1RPRs2jm/waeW3ki95o3PycOyXkXp1cQNyJ65+WJ4LMrVKLgKQc6AG4CuSdDyDX75drsvD+ZT1RKTbVFaJTEIi01RsjqBYsj8esggd8pzxeSDTLsO6ErfR4HjuBr6FfSJnhtel5fsb4SS7XpDUP/tb4TL9iX7Wd++Pk1XhI59IKpNGjUUAlXTebDpqyEE8BciZNPpFS4t3BvhDYn6RUWoPSzk5hdei2jAhhw3XEUcOSM4ySfDIZHGUast/CYjzaf6h+WDC4nU5ELagHOeiD5Iy6du+WOEwOGdEcUE6ahvEAtcSY2TQzH+RSy206IvebanPyZnty8lN4DE+bT12v32h0fEhbMiHfrnI06+jH6Wy6HSzUKY106I3Sf8AZeG8ynqiG6fkm4zfbRSeDxIABRDbTV/2kGp4g7kT1z8Jc19l0Mt1oUyfuieLsvD2F6CA21GUaRXLyWKeZcWUhoYnyE9f9oKthsQQRkT1z8JfNszD+ZT1RBtszD+ZT1RC5+Qc8zVNlClKuCpyJ0b/AFzxFuUJ4asdMiev+0tm2bh/NJ6ogP7Oo3N6KW4Gw1kt0vJXKM5O2ysZ63kJ6/7SDVK3kJ6/7R9MHRYE+BQDhoNZBNn0ra0kB7BDdLyR2S8la71iQciaX+vz05RatVqn6qi3Jv2lviNm07dGml78hJHZ1HzaeqIbpeR7JeTI47NnXMAOi3G/FYuxmzfZdA76SH8IgzsnD+ZT1RLI5GlySUeDFsZ02Z2Vh/Mp6onR7x7QQMmDBAz0uBvMrJBgZ49S2gFyZ4DJAwAMDJAxOvjETxmF+W89wlViduMdEXL9ptT3bh7YAX7uiXdiF5km3vlZifpAi6IC55nor8TM9Wd3N3Yses+7lIBIAN4vaVWpoz6eSui/v6YmJLJOCQEdee3nmSM4PBs5sNAPGbl8T1QAls/BPWfKugHjNwUfHqm1wOGSkgRBpxPFjxJPEwOAoIiBUFhv13k8z1xkGAxhXhlqRLNKTae3bXSibni+8D7vM9e7tgBd7T2ylAa9J+CA69p8kTG4/aVSs2Z2+6o0Vewfrvib5iSSSSdSSbk9pnBYATzT0NIBZxSAEw8b2XhfC1UTgT0vujVvYLemJKlpp/olhcoeqePQXsGrHvt3QA2Wed4SJeEneEkR2OGpIM/CKmpPDUgAwjBRYbp41SKmpA1sSFFzflJCHGqSDPFjUgWdswtu4n9IANM8GzwZM8JgBItB1HsL756TIloAcrXFyLdU8JnEyJMAPSZEmDcnS1rcf2nFoAekzoCqGY2vYe2dABSQO8Tp0ADiK7UchDYkdhtOnQAz4nCezoAeyKcZ7OgImJ7OnQGezU7HQeBTQbyd3HXWeToAWAns6dACu24x8Hv32v16GZqdOgIivjGTnToADo8YUTp0Bns2Gw/8FOz9TOnQAenTp0APDIzp0AImeTp0APDPDOnQA6RM6dACJnGdOgBEyBnToAeGQM9nQAiZ06dAD//Z" alt="">
<img id="images" src="data:image/jpeg;base64,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" alt="">
<div class="pre">
<h1>
<</h1>
</div>
<div class="nex">
<h1>></h1>
</div>
</div>
</body>
<script>
var next = document.querySelector('.nex');
var previous = document.querySelector('.pre');
next.onclick = () => {
document.getElementById("images").style.transform = "translateX(-100%)";
}
</script>
</html>
I'm trying to order items by column
It works very well at 'flex : row wrap'
but 'flex-flow : column wrap '
doesn't work.. also I tried 'flex-direction : column and flex-wrap : wrap '
I can't found any error at my code
please help..
* {
font-size: 0px;
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 500px;
margin: 3% auto;
padding: 0;
background-color: white;
}
.wrap div {
color: yellow;
width: 33.333333333333%;
}
.wrap div:first-child {
background-color: blue;
}
.wrap div:nth-child(2) {
background-color: blueviolet;
}
.wrap div:last-child {
background-color: crimson;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
I've found what you want. You need to use flex-grow for each item so that they grow to take all the space of the container.
* {
font-size: 0px;
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 500px;
margin: 3% auto;
padding: 0;
background-color: white;
}
.wrap div {
color: yellow;
width: 33.333333333333%;
flex-grow: 1;
}
.wrap div:first-child {
background-color: blue;
}
.wrap div:nth-child(2) {
background-color: blueviolet;
}
.wrap div:last-child {
background-color: crimson;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Edit : If you don't have any content in the divs then wrapping will not work if you use the above method. To enable wrapping, you will have to provide custom height to the items like in the snippet below:
* {
font-size: 0px;
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 500px;
margin: 3% auto;
padding: 0;
background-color: white;
}
.wrap div {
color: yellow;
width: 33.333333333333%;
height: 150px;
}
.wrap div:first-child {
background-color: blue;
}
.wrap div:nth-child(2) {
background-color: blueviolet;
}
.wrap div:last-child {
background-color: crimson;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>