Skip to content

Instantly share code, notes, and snippets.

@pujie

pujie/flex-responsif.html

Created April 25, 2022 03:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pujie/c2609a8725542c0b6e93d0d50ba3f610 to your computer and use it in GitHub Desktop.
Save pujie/c2609a8725542c0b6e93d0d50ba3f610 to your computer and use it in GitHub Desktop.
Download ZIP
implementation of responsive flex
Raw
flex-responsif.html
<html>
<head>
<title>Transpose</title>
<style>
#main{
display: flex;
flex-direction: row;
color:chartreuse;
}
@media screen and (max-width:1000px){
#main{
display: block;
color: aqua;
}
.row{
display: flex;
flex-direction: row;
color: brown;
justify-content: space-evenly;
align-items: stretch;
border:1px solid black;
flex-grow: 1;
}
}
</style>
</head>
<body>
<div id="main">
<div class="row">
<div class="col">Nama</div>
<div class="col">Alamat</div>
<div class="col">Keterangan</div>
<div class="col">Aksi</div>
</div>
<div class="row">
<div class="col">Sugeng</div>
<div class="col">Kediri</div>
<div class="col">PNS</div>
<div class="col">Edit</div>
</div>
<div class="row">
<div class="col">Wahyu</div>
<div class="col">Banyuwangi</div>
<div class="col">Swasta</div>
<div class="col">Edit</div>
</div>
<div class="row">
<div class="col">Bambang</div>
<div class="col">Probolinggo</div>
<div class="col">Swasta</div>
<div class="col">Hapus</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment