Applying Transition on Flexbox Justify-Content Property

CSS can I transition to flex-end?

You cannot animate such values. I suggest, you animate margin-left instead

.switch {
  --slider-width: 26px;
  --switch-width: calc(100% - var(--slider-width) / 2);
  /* --- */
  width: var(--switch-width);
  /* --- */
}
/* --- */
.slider:before {
  /* --- */
  width: var(--slider-width);
  /* --- */
}
/* --- */
input:checked + .slider {
  margin-left: calc(var(--switch-width) - var(--slider-width) / 2);
}

.checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  --slider-width: 26px;
  --switch-width: calc(100% - var(--slider-width) / 2);
  position: relative;
  display: flex;
  width: var(--switch-width);
  height: 34px;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  justify-content: flex-start;
  transition: 0.5s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: var(--slider-width);
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: 0.5s;
}

input:checked + .slider:before {
  /* transform: translateX(125%); */ /* note this transitions correctly */
  background-color: darkgreen;
  /* transition: var(--transition); */
  transition: 0.5s;
}

input:checked + .slider {
  background-color: #2196f3;
  margin-left: calc(var(--switch-width) - var(--slider-width) / 2);
  transition: 0.5s;
}

<label class="switch">
  <input type="checkbox" class="checkbox"/>
  <span class="slider"></span>
</label>

Can I apply align-self on transition?

consider margin intead since you are using fixed height:

.wrap {
  height: 300px;
  width: 600px;
  margin: 0 auto;
}
.wrap div {
  height: 100px;
  width: 100px;
  border: 3px solid black;
  background-color: pink;
  transition: margin 1s;
}
.wrap div:nth-of-type(2) {
  margin-bottom:200px
}
.wrap div:nth-of-type(4) {
  margin-top:200px
}

.wrap:hover div {
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>A Great Demo on CodePen</title>
</head>
<body>
 <div class="wrap d-flex align-items-center justify-content-md-center">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

How can I transition a flexbox sliding in from the left, to be centered on the page?

Instead of animating margin, you should use the CSS property transform, which is was created to use for this kind of transitions. Then you can leave the CSS layout properties such as margin and position intact. Unlike margin, changing transform will never change the positioning of surrounding elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

.container {
  background: #eee;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

#root {
  align-self: center;
  width: 85%;
  height: 60px;
  background: #ccc;
  transition: 1s transform;
  padding: 10px;
}

.hidden {
  transform: translateX(-100vw);
}

<div class=container onclick="document.querySelector('#root').classList.toggle('hidden')">
  <div id=root> This is #root </div>
  <p>click to hide or show #root</p>
</div>

css flexbox justify-content

Leverage :only-child

.wrap {
  display: flex;
  margin-bottom: 1em;
  justify-content: space-between;
  width: 50%;
  border: 1px solid grey;
  padding: .25em;
}

.item {
  border: 1px solid red;
  padding: 1em;
  background: pink;
}

.item:only-child {
  margin-left: auto;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrap">
  <div class="item"></div>
</div>

Applying Transition on Flexbox Justify-Content Property

CSS can I transition to flex-end?

Can I apply align-self on transition?

How can I transition a flexbox sliding in from the left, to be centered on the page?

css flexbox justify-content

Related Topics

Leave a reply